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

代码如下：

　　

<!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. linux 进程的创建

    1. 进程号: 每个进程在被初始化的时候,系统都会为其分配一个唯一标识的进程id,称为进程号: 进程号的类型为pid_t,通过getpid()和getppid()可以获取当前进程号和当前进程的父进程的 ...

  2. 通过rem编写自适应移动端要点

    直接上干货 1,dpr 苹果手机像素是2 普通安卓机是1 也就是说1像素下苹果需要的像素点是安卓机的两倍 所以一个需要15x15显示的图像安卓机仅需要提供15X15即可显示清楚 苹果手机需要要30X3 ...

  3. [PHP]使用PHPMailer发送带附件并支持HTML内容的邮件

    来源:http://www.helloweba.com/view-blog-205.html PHPMailer是一个封装好的PHP邮件发送类,支持发送HTML内容的电子邮件,以及可以添加附件发送,并 ...

  4. eclipse 查看变量或方法在什么地方被调用的快捷键

    选中方法名,点鼠标右键,菜单里有个”打开调用层次结构 ( Open Call Hierarchy )“,选中或者按下快捷键Ctrl+Alt+H,就在下面栏目里能看到调用的树形结构了. 或者: 1.双击 ...

  5. AIX 环境下减小系统page space空间

    IBM AIX v5.3操作系统环境下减小系统page space空间详细步骤如下 1,创建一个临时的page space空间#mkps -a -n -s 20 rootvg 这里-a参数指定页面空间 ...

  6. shell判断FTP传输是否成功

    #!/bin/bash ##判断FTP传输文件是否成功 exec 6>&1 1>/tmp/lzc.txt ##打开一个文件描述符6,保存文件描述符1的属性,然后将描述1重定向到lz ...

  7. hive中拉链表

    在有些情况下,为了保持历史的一些状态,需要用拉链表来做,这样做目的在可以保留所有状态的情况下可以节省空间. 拉链表适用于以下几种情况吧 数据量有点大,表中某些字段有变化,但是呢变化的频率也不是很高,业 ...

  8. 移动端bug整理，随时更新

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 } p.p2 { margin: 0.0p ...

  9. 项目中可能用到的demo

    1. 轮播图   https://github.com/codingZero/XRCarouselView 2. 图表   https://github.com/Zirkfied/ZFChart

  10. 三表联查，这是我目前写过的最长的sql语句，嗯嗯，果然遇到问题才能让我更快成长，更复杂的语句也有了一些心得了

    select sum(amount),sum(card_number) from sy_user inner join sy_admin on sy_user.customer_id=sy_admin ...