点击切换背景颜色 zepto.js

方法有二:

 //初始化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的文件啊,没有链接,白费劲了.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 10,956评论 0 106
  • 相关知识点 移动端、 适配(兼容)、 ios点击事件300ms延迟、 点击穿透、 定位失效...... 问题&解决...
    sandisen阅读 25,706评论 3 67
  • 罗纳尔多在今年的情人节离开了他深爱的绿茵场,留给了我无尽的遗憾,他是世界上最好的前锋,没有之一。看到谭咏麟顶着“不...
    何季风停阅读 2,905评论 0 0
  • 修改属性默认的特性: 描述符对象: 如:var person = {}; Object.definePropert...
    俗三疯阅读 2,865评论 0 0
  • 可以使用Swing的DefaultTableModel类。 DefaultTableModel model = n...
    Leeffy阅读 10,225评论 0 2