jQuery隐式迭代案例

<script src="./jquery.min.js"></script>
<script>
    // tab切换的思路
    // 循环遍历,给所有的ul中li添加index属性
    // 当点击ul,li标签时,给所有的ul,li 和 ol li
    // 先去除active属性
    // 再给点击的ul,li标签添加 active 属性
    // 再给对应的ol,li标签,添加active 属性

    // JavaScript版本
    // const oUlli = document.querySelectorAll('ul>li');
    // const oOlli = document.querySelectorAll('ol>li');

    // oUlli.forEach(function(item , key){
    //     item.setAttribute('index', key);
    //     item.addEventListener('click' , function(){
    //         for(let i = 0 ; i <= oUlli.length-1 ; i++){
    //             oUlli[i].className = '';
    //             oOlli[i].className = '';
    //         }

    //         this.className = 'active';
    //         oOlli[this.getAttribute('index')].className = 'active';

    //     })
    // })

    
    // jQuery的版本
    // 在jQuery中,this,就是当前点击的对象
    // 标签对象.addClass('属性值')      给标签对象,添加class属性和属性值
    // 标签对象.removeClass('属性值')   删除标签对象中,添加class属性的指定属性值
    // 标签对象.index()  获取当前标签对象,在数组中的索引下标

    $('ul>li').click(function(){
        $(this)  // this 指向当前点击的标签 , 别忘了用()包裹,转化为jQuery形式
        .addClass('active') // 给当前点击的标签,添加class选择器和属性值
        .siblings().removeClass('active') // 删除当前标签,兄弟标签的,class选择器active属性
        .parent()  // 当前ul.li的父级,也就是ul
        .next()    // ul的下一个兄弟,ol
        .find('li')  // 找到ol下的li标签
        .eq($(this).index())  //  获取当前点击的ul,li标签在数组中的索引下标,把这个索引下标作为在ol中找到对应li标签的索引下标
        .addClass('active')  // 给标签添加class属性和active属性值
        .siblings()   // 找到当前ol,li标签的兄弟
        .removeClass('active') // 去除class属性的active属性值
    
    })

    // 总结:
    // 当前点击的li标签,添加样式
    // ulli的兄弟标签,删除样式
    // 找到ol中的所有li
    // 通过筛选器,获取索引下标与点击li标签索引下标相同的li
    // 给这个olli添加样式
    // 给ol中其他兄弟li删除样式


</script>