• 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 判断,传进来什么数字就修改哪一个        

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

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

  • 相关阅读:
    Visual Studio 2015 密钥
    Vue-next源码新鲜出炉一
    vue2.0基础整理
    Nest
    Nest
    Nest
    Nest
    Nest快速上手
    element-plus源码分析第一节
    获取视频第一帧,作为封面图
  • 原文地址:https://www.cnblogs.com/zhanghaoliang/p/6225939.html
Copyright © 2020-2023  润新知