实现的效果，点击哪个，哪个变颜色，效果如下。

代码如下：

　　

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

   <div class="navigation-center">

		<a href="#"><div class="color:black" id="shouye" onclick='show(1);return false;'>first</div></a>

		<a href="#"><div class="color:black" id="public"  onclick='show(2);return false;'>second</div></a>

		<a href="#"><div class="color:black" id="okok" onclick='show(3);return false;'>thrid</div></a>

	</div>

	<script>

		function show(num){

			switch(num){

				case 1:

					alert("123");

					document.getElementById("shouye").style.color="blue";

					document.getElementById("public").style.color="black";

					document.getElementById("okok").style.color="black";

					break;

			    case 2:

					alert("456");

					document.getElementById("public").style.color="blue";

					document.getElementById("shouye").style.color="black";

					document.getElementById("okok").style.color="black";

					break;

				case 3:

					alert("789");

					document.getElementById("okok").style.color="blue";

					document.getElementById("shouye").style.color="black";

					document.getElementById("public").style.color="black";

					break;

			}

		}

	</script>

　　

先运行一下试一试

思路：

　　点击事件触发show() 方法，触发后传进去一个数字，switch 判断，传进来什么数字就修改哪一个

　  修改样式是我自己随便写的，可以你们的样式，我的只是蓝黑色切换

修改样式思路：点击哪一个，哪一个变黑，其他两个变蓝色

js使用Switch达到切换不同颜色的效果的更多相关文章

  1. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  2. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  3. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  4. Android开发之ViewPager实现多页面切换及动画效果（仿Android的Launcher效果）

    Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下:       1.Vi ...

  5. 跨平台移动开发_PhoneGap 再次点击返回键切换到桌面效果

    PhoneGap 再次点击返回键切换到桌面效果 相关代码 <!DOCTYPE html> <html> <head> <title> PhoneGap ...

  6. TouchPoint.js – 可视化展示 HTML 原型点击效果

    TouchPoint.js 是一个用于 HTML 原型展示的 JavaScript 库(作为UX过程的一部分),通过视觉表现用户在屏幕上的点击.TouchPoint 是高度可定制,非常适合屏幕录制,用 ...

  7. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  8. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  9. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

随机推荐

  1. STL之容器适配器priority_queue

    priority_queue(优先队列)是一个拥有权值观念的queue,它允许加入新元素,删除旧元素,审视元素值等功能.由于这是一个queue,所以只允许在底端加入元素,并从顶端取出元素, 除此之外别 ...

  2. Delphi编写DLL供C#调用的实例

    Delphi中编写的Dll: library TestDLL; { Important note about DLL memory management: ShareMem must be the f ...

  3. C++对象模型详解

    原文链接:吴秦大神的C++对象模型. 何为C++对象模型? C++对象模型可以概括为以下2部分: 1.语言中直接支持面向对象程序设计的部分: 2.对于各种支持的底层实现机制. 语言中直接支持面向对象程 ...

  4. 安卓工程 Installation error：INSTALL_PARSE_FAILED_MANIFEST_MALFORMED的解决办法

    解决办法:把包名首字母改成小写就好了.

  5. encodeURI来解决URL传递时的中文问题

    在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. 使用JQUERY中所提供的方法来做操作 encodeURI function verify() {    //解决中文乱麻问题的 ...

  6. 5、SQL Server数据库、T-SQL

    SQL Server数据库基础 一.安装SQL Server数据库 setup.exe->安装->全新SQL Server独立安装或向现有安装添加功能->输入序列号->下一步- ...

  7. 会话状态已创建一个会话 ID，但由于响应已被应用程序刷新而无法保存它

    解决方法是新建 全局应用程序类 Global.asax 在 Session_Start 函数中 添加 string sessionId = Session.SessionID; protected v ...

  8. 浅析tomcat nio 配置

    [尊重原创文章摘自:http://blog.csdn.net/yaerfeng/article/details/7679740] tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成 ...

  9. mysql 已有数据字符集的修改

    mysql 字符集的修改 可以使用set names utf8 通过修改配置文件 可修改参数 default_character_set=utf8 但是以上修改方法只对数据库中新增的记录生效,如果数据 ...

  10. Python: 元组的基本用法

    元组和列表是近亲,列表允许并且提供了方法来改变它的值,但元组是不可改变的,即不允许你改变它的值----这也是它没有方法的部分原因. 元组的主要作用是作为参数传递给函数调用.或是从函数调用那里获得参数时 ...