代码改变世界
[登录 · 注册]
  • 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 判断,传进来什么数字就修改哪一个        

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

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

  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/zhanghaoliang/p/6225939.html
Copyright 2008-2020 晋ICP备12007731号-1