实现按钮动态切换效果

最新推荐文章于 2024-02-10 15:17:04 发布

执于代码

最新推荐文章于 2024-02-10 15:17:04 发布

阅读量435

点赞数

本文链接：https://blog.csdn.net/xiamaocheng/article/details/102811037

版权

效果图：

点击监控，

点击停止：后复原

css 文件：

	<style type="text/css">
			.mySpan {
				padding: 10px 10px;
			}
			

			.green {
				color: white;
				font-weight: bold;
			}
			
			.red11 {
				color: #ffffff!important;;
			    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;
			    background-color: red!important;
			    background-image: linear-gradient(to bottom, red, red)!important;
			    background-repeat: repeat-x!important;
			    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)!important;
			}
			
			.yellow {
				background: yellow;
			}
			
			.green11 {
				color: #ffffff!important;
			    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;
			    background-color: green!important;
			    background-image: linear-gradient(to bottom, #0088cc, green)!important;
			    background-repeat: repeat-x!important;
			    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)!important;
			}

</style>

切换逻辑：

 //点击实时监控 停止按钮隐藏
    	
    	 $("#bt2").click(function(){
        	 //alert("开始监控");
        	 //监控绿色
        	  //$("#bt2").attr("class", "green");
        	 $("#bt2").removeClass("btn-primary");
        	 $("#bt2").addClass("green11");
        	 //停止为红色
        	// $("#bt3").hide();
        	 //	$("#bt3").attr("class", "red");
           	 $("#bt3").removeClass("btn-primary");
        	 $("#bt3").addClass("red11");
        	 //重新点击按钮时，切换为监控状态
        	 
        	 //表格显示
          // $("#minitortable").html("");
        	 showflag=true;
        	 
        });
    	
    	//点击停止按钮，监控显示
    	 $("#bt3").click(function(){
        	/// alert("停止");
        	 //红色消失，
        	 //$("#bt3").removeClass(red11);
          	 $("#bt3").removeClass("red11");
        	 $("#bt3").addClass("btn-primary");
        	 
        	 //$("#bt2").removeClass();
           	 $("#bt2").removeClass("green11");
        	 $("#bt2").addClass("btn-primary");
        	 $("#bt3").show();
        	 $("#bt2").show();
        	 showflag=false;
        	
        });
    });

布局方式：

 <div class="toolbar-box">     			
				<div class="buttons">
					 <a id="bt1" class="btn btn-primary " href="javascript:void(0);" ><span class ="mySpan">全选</span></a>
					 <a id="bt2" class="btn btn-primary " href="javascript:void(0);" ><span class ="mySpan">实时监控</span></a>
			
					
					  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <font style="font-size: large">区  域:</font>
            <!-- <table>
              <tr> -->
               <!--   <td>  -->
                 <input  name="m:doorController:zoneid" type="hidden"   id="hid_zoonid" value="${doorController.zoneid}"/>	
                <!--  					    </td>
                 <td>  -->
                 <input style="width:130px;height:20px;" type="text" data-key="#hid_zoonid" readonly="readonly"  class="form-control comboTree" data-toggle="dictionary" data-url="${ctx}/rdp/area/zone/list_json_tree.htm?" value="${doorController.zonename}"  validate="{required:true}"/>
                <!--  </td> -->
              
          <!--     </tr>
            </table> -->
              
        
              <!--  <inputtype="button" value="查询"/> -->
                <button  id="bt8" name="bt8" style="font-size: large">查询</button>
			    </div>
	    </div><!--/ 查询条件-->