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

代码如下：

　　

<!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. 网站压力测试工具webbench使用说明

    一.webbench简介        Webbench是有名的网站压力测试工具,它是由Lionbridge公司(http://www.lionbridge.com)开发.它的帮助文件和文档请到:ww ...

  2. 冲刺一 （Day 3）

    冲刺一 (Day 3) 用户表 uid int 8 用户ID username varchar 20 用户名 password varchar 20 密码 email varchar 30 邮箱 ph ...

  3. MySQL学习（一）

    mysql left join,right join,inner join用法分析 left join:是以A表的记录为基础的,A可以看成左表,B可以看成右表,left join是以左表为准的. 换句 ...

  4. PIC32MZ tutorial -- UART Communication

    At this moment, I accomplish the interface of UART communication for PIC32MZ EC Starter Kit. This in ...

  5. eclipse的快捷键（写给eclipse新手）

    Eclipse常用的快捷键 1.常用的快捷键 Alt+/:常用于补全单词.方法,以及内容辅助,可以省很多事情 Ctrl+1:用于全局,快速修正 Ctrl+D  删除整行 Ctrl+F   用于全局 , ...

  6. Android开发--仿微信语音对讲录音

    原文地址:http://www.2cto.com/kf/201502/378704.html 自微信出现以来取得了很好的成绩,语音对讲的实现更加方便了人与人之间的交流.今天来实践一下微信的语音对讲的录 ...

  7. Ternary Search Trees 三分搜索树

    经常碰到要存一堆的string, 这个时候可以用hash tables, 虽然hash tables 查找很快,但是hash tables不能表现出字符串之间的联系.可以用binary search ...

  8. JS,JQuery的扩展方法

    转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            ...

  9. redis的安装和启动

    Windows下Redis的安装及PHP扩展使用 时间 2014-10-28 17:47:09  CSDN博客 原文  http://blog.csdn.net/wyqwclsn/article/de ...

  10. etc这个目录

    自己对他的记忆最深了,因为每次你添加新的软件向电脑里时,软件都会有一个自己的配置文件,那么你修改这个配置文件的某个选项,就可以改变软件的某个功能. 或者是某个外设都有自己的配置文件. 其实这个配置文件 ...