jQuery-----选项卡demo

一.js代码解释

<script src="jquery.min.js"></script>
<script>
    // jQuery选项卡效果
    // 思路和执行步骤,与js完全相同
    // 1,给所有的标签去除样式
    // 2,给点击的标签,添加样式
    // 3,找到索引与点击标签相同的ol中的li标签,添加样式

    // jQuery中,添加事件的语法形式
    // $().事件类型(事件处理函数(){})
    // jQuery的本质还是js,事件处理函数,也会有this
    // this的指向与js中的this指向是一样的
    // 绑定事件的事件处理函数,this指向的是绑定事件的标签
    // 点谁,this指向的就是谁
    // 但是 this 是 JavaScript语法形式
    // 要是 jQuery 操作,必须要转化为jQuery的语法形式 $(this)

    // 给ul中的所有li,添加点击事件
    $('ul>li').click(function(){
        // $(this)        // this是当前标签,但是是js语法,$(this)变成jq对象
        // .addClass('active')   // 给当前标签,新增class属性值,也就是点中效果
        // .siblings()        // 当前标签的兄弟标签
        // .removeClass('active')        // 删除兄弟标签的class选中效果的属性值,也就是active属性值,其他class会保留
        // 上面是完成ul中li的设定,现在要设定ol中的li
        // .parent()        // 找li的直接父级,ul   
        // .next()          // 找ul的下一个兄弟标签,ol
        // .children()      // 获取ol标签中,所有的子级标签    或者 .find('li')
        // .removeClass('active')        // 给所有的li去除选中效果,也就是class active属性值 
        // .eq($(this).index())        //   $(this).index()  获取当前点击标签的索引    
                                    //   .eq( $(this).index() )  按照点击的li标签的索引,在ul中找li标签  
        // .addClass('active');        //  添加点击效果,也就是class active属性值
        $(this).addClass('active').siblings().removeClass('active').parent().next().find('li').removeClass('active').eq($(this).index()).addClass('active');          
    })

</script>

二.demo