js使用Switch达到切换不同颜色的效果

最新推荐文章于 2022-03-09 16:11:55 发布

weixin_30809333

最新推荐文章于 2022-03-09 16:11:55 发布

阅读量565

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/zhanghaoliang/p/6225939.html

版权

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

代码如下：

<!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" οnclick='show(1);return false;'>first</div></a>
		<a href="#"><div class="color:black" id="public"  οnclick='show(2);return false;'>second</div></a>
		<a href="#"><div class="color:black" id="okok" οnclick='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 判断，传进来什么数字就修改哪一个

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

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

转载于:https://www.cnblogs.com/zhanghaoliang/p/6225939.html

weixin_30809333

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js使用Switch达到切换不同颜色的效果

实现的效果，点击哪个，哪个变颜色，效果如下。代码如下：　　<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> ...
复制链接

扫一扫