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" 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 判断,传进来什么数字就修改哪一个
修改样式是我自己随便写的,可以你们的样式,我的只是蓝黑色切换
修改样式思路:点击哪一个,哪一个变黑,其他两个变蓝色