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

代码如下：

　　

<!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. Android基础开发文档汇总

    一.Android 基本组件 1. Android中PackageManager使用示例 :  http://blog.csdn.net/qinjuning/article/details/68678 ...

  2. ps基础知识

    一 1. ps常用快捷键:ctrl+d 结束选区    ctrl+alt+z  返回          ctrl+z 撤销           ctrl+x 剪切 ctrl+t 编辑图片    ctr ...

  3. ReactJS学习笔记(一)

    1.依赖的资源: <script type="text/javascript" src='../asset/react.js'></script>   &l ...

  4. PS1应用之——修改linux终端命令行各字体颜色

    最近在学习linux操作系统(CentOS 6 & CentOS 7).觉得linux终端命令行全部为白色,会经常导致命令与输出内容难以分辨.于是上网找到修改linux终端命令行颜色的方法,发 ...

  5. 使用Maven来写j2ee项目

    第一步:使用Maven创建web项目 是不是很简单? 第二步 问题 很多人,创建好后是没有src/main/java的源文件的,解决办法: 1.直接new ResourceFloder,src/mai ...

  6. css3 text-overflow属性

    页面: <ul> <li>· 测试测试测试测试测试测试</li> <li>· 测试测试测试测试测试测试</li> <li>· 测 ...

  7. Linux内核分析总结

    张潇月 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 学习目录: (1)计算机是如何工作的   h ...

  8. Ubuntu实现wifi热点

    系统:Ubuntu14.04 方法一: 打开网络连接,新建wifi,设置SSID和密码,完成设置后保存,再连接到隐藏的wifi,选择刚建立好的连接即可 优点:简单方便 缺点:建立的是Ad-hoc模式信 ...

  9. Visual Studio 2015 工具箱丢失

    网上主要的解答分为两种:1. 未打开设计界面 2. 重置 实际上,还有一个原因是,没有启动完整版的VS. 安装完后,会有两个VS的程序,一个是Blend For Visual Studio 2015, ...

  10. [vivado系列]Zynq开发常用文档

    时间:2016.06.13 目的:阶段性总结学习的策略 ------------------------------------------------------------------------ ...