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

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

代码如下:

  

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

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

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

相关文章:

  • 2021-11-21
  • 2021-06-17
  • 2021-12-19
  • 2021-07-31
  • 2021-08-21
  • 2021-07-19
猜你喜欢
  • 2021-05-27
  • 2022-12-23
  • 2021-12-19
  • 2021-12-19
  • 2021-12-19
  • 2021-10-21
  • 2022-12-23
相关资源
相似解决方案