實現的效果,點擊哪個,哪個變顏色,效果如下。
代碼如下:
<!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 判斷,傳進來什么數字就修改哪一個
修改樣式是我自己隨便寫的,可以你們的樣式,我的只是藍黑色切換
修改樣式思路:點擊哪一個,哪一個變黑,其他兩個變藍色