zoukankan      html  css  js  c++  java
  • 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 判断,传进来什么数字就修改哪一个        

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

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

  • 相关阅读:
    glog下载、安装、使用
    VS所需插件
    Qt 实现动态调整流程指令顺序(通过鼠标事件实现)
    QComboBox实现复选框功能
    QString string char* int互相转化
    Qt 滚动区域显示下拉框
    模式对话框,非模式对话框,reject和accept()槽函数确定对话框的返回值
    QT递归搜索文件(entryList)
    QT中foreach的使用
    Qstring格式化字符串
  • 原文地址:https://www.cnblogs.com/zhanghaoliang/p/6225939.html
Copyright © 2011-2022 走看看