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

前端学习笔记(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");
        })