点击切换背景颜色 zepto.js

2017-10-18  本文已影响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的文件啊,没有链接,白费劲了.

上一篇下一篇

猜你喜欢

热点阅读