前端学习笔记(zepto或jquery)——对li标签的相关操作（一）

对li标签的相关操作——点击li标签进行样式切换的两种方式

Demo演示：

• 1
• 2
• 3
• 4

 

详解：

第一种方式（以ul为基础）：

         $("ul").bind("click", function(e) {
            $(e.target).closest("li").addClass("hilight");
            $(e.target).closest("li").siblings().removeClass("hilight");
          });

 

注解：closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上
        toggleClass():该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。
        addClass():添加类；removeClass():移除类

 

第二种方式（以li为基础）：

    $("ul>li").click(function(){
             $(this).addClass("hilight");
             $(this).siblings().removeClass("hilight");
        })