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

代码如下：

　　

<!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. jQuery-表单流程导航

    前言:以前做过一个项目,里面牵涉到流程相关的业务,需要用到流程页面导航的效果,完整的工作流相关的项目以前也做过,需要用到第三方插件,当然这里记录的业务需求没这个麻烦,仅仅需要能有一个页面导航的标题栏, ...

  2. android bundle存放数据详解

    转载自:android bundle存放数据详解 正如大家所知道,Activity之间传递数据,是将数据存放在Intent或者Bundle中 例如: 将数据存放倒Intent中传递: 将数据放到Bun ...

  3. iOS在label上加横杠

    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 50, 200, 50)];    [self.view addSubvi ...

  4. JS实现div动态水平垂直居中

    在做页面的过程中,在很多地方都会遇到元素需要水平垂直的居中这个问题,之前总是去网上搜别人的代码,今天仔细研究了一下,分享给大家,先写一个简单的例子: <div class="mui-c ...

  5. spring mvc <mvc:default-servlet-handler /> 。

    spring mvc配置 <mvc:default-servlet-handler /> 时. 提示 The prefix "mvc" for element &quo ...

  6. background-size拉伸背景图片

    在制作页面中常需要对背景图片在容器中进行平铺,可用background-size属性对背景编辑:拉伸,压缩等~ background-size:contain; 将背景扩展到整个容器大小. 较为实用的 ...

  7. MySQL 第八天（核心优化二）

    一．昨天内容回顾 存储引擎 保存数据的格式(技术),不同格式体现特性不一样 myisam ① 结构.数据.索引 文件单独存储 ② 存入数据顺序(不考虑主键顺序) ,写入数据速度快 ③ 并发性,低,锁整 ...

  8. 移动端穿插着PC端自动化-Python基础（干货）

    1.前面已经把所有前期工作完成了 下面进行一些简单的小脚本来更好的了解Python.对Python有一些基础的童鞋理解起来会比较容易,我刚接触的时候也会有点懵的,现在简单的也是没问题了. 大牛请不要喷 ...

  9. C++模板类继承的一个小技巧

    先说一下background前段时间想实现一个Sqlite localstorage的功能,对应不同的Model 实体有不同的table, 每一次sql操作的函数签名中会有model实体中的struc ...

  10. CocoaPods安装及使用《转》

    http://www.cnblogs.com/eagley/p/5407721.html