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 判斷,傳進來什么數字就修改哪一個        

   修改樣式是我自己隨便寫的,可以你們的樣式,我的只是藍黑色切換     

     修改樣式思路:點擊哪一個,哪一個變黑,其他兩個變藍色


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM