實現的效果,點擊哪個,哪個變顏色,效果如下。

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