美文网首页
点击切换背景颜色 zepto.js

点击切换背景颜色 zepto.js

作者: 哼_ | 来源:发表于2017-10-18 17:34 被阅读141次

    方法有二:

     //初始化div,并注册事件
    var initDiv = function () {
    $(".managementPanel div").eq(0).css("background", "red");
    $(".managementPanel div").mouseover(function () {
         $(this).css("background", "#588600");
     }).mouseout(function () {
             $(this).css("background", "");
    })
     };
     initDiv();
    $(".managementPanel div").click(function () {
          $(this).prev().css("background","");
     initDiv();
    //当前被点击的div改变背景色
     $(this).css("background", "red");
     //取消当前div的mouseout和mouseover事件
     $(this).unbind("mouseout");
            $(this).unbind("mouseover");
     });
    

    代码很多吧 ,很麻烦
    方法二:

     .active{
                background: #54a7f0;
                color:#fff;
                border-radius: 3px;
            }
    //html代码
    <ul class="money-ul">
                <li class="active">不限</li>
                <li>3-6月</li>
                <li>6-12月</li>
                <li>12-18月</li>
                <li>18月以上</li>
            </ul>
    

    加一个样式

    $(".money-ul li").on("click",function(){
       $(this).addClass("active").siblings().removeClass("active");
    })
    

    三行代码就搞定了对不对,有没有很兴奋!!!

    用zepto的时候,把click换成tap就OK了.但是呢,记得link zepto.js的文件啊,没有链接,白费劲了.

    相关文章

      网友评论

          本文标题:点击切换背景颜色 zepto.js

          本文链接:https://www.haomeiwen.com/subject/ufueuxtx.html