zoukankan      html  css  js  c++  java
  • 点击元素改变样式,再点击,又变回去,来回变

    我们经常做的是点击元素改变样式,只是点击一次,那么如果点击很多次呢,我们需要元素来回变化呢?这时候我们就用class名来改变,判断是否有该class

    啥都别说了,上代码

    <div class="shbian test">你点我就变</div><!--点击显示,再点击其他地方隐藏-->
    
    .shbian{text-align: center;height: 60px;line-height: 60px; 160px;cursor: pointer}/*基本的样式*/
    .active{color: white;background: midnightblue;box-shadow: 0 0 10 #000000;border-radius: 6px;border: none;;}/*一个样式*/
    .test{border: 1px solid #009688;border-radius: 6px;}/*默认的样式*/
    
    var shb=$('.shbian');
    			shb.on('click',function(){
    				if(shb.hasClass('test')){//如果有‘test’的样式,就去除他的样式,添加‘active’的样式
    					shb.removeClass('test').addClass('active');
    				}else if(shb.hasClass('active')){//如果有‘active’的样式,就祛除他的样式,添加‘test’的样式
    					shb.removeClass('active').addClass('test');
    				}
    			})
    

      效果图:原来默认的

    点击改变

    再点击:

      

      

  • 相关阅读:
    Kali 2020.3安装docker和vulhub
    Web渗透——身份管理测试
    Web渗透——配置管理测试
    网站信息收集
    linux修改MAC的方法
    '文件上传总结'
    美杜莎和九头蛇的对比
    渗透测试常见开放端口及利用
    Google hacking 语法
    web渗透测试基本步骤
  • 原文地址:https://www.cnblogs.com/eyed/p/8439301.html
Copyright © 2011-2022 走看看