jquery的循环 tab切换

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <script src="./jquery.min.js"></script>

    <script>

        // jQuery的循环

        // 1 , 隐式迭代

        // 会自动给 伪数组中的所有标签对象,加载相同的内容 属性样式等设定 以及 事件的绑定

        console.log( $('ul>li'))

        // 设定的属性样式,会自动加载给所有的标签对象

        $('ul>li').css({color:'red'});

        // 给所有的标签的自动绑定相同的事件

        $('ul>li').click(()=>{

            console.log(123);

        })

        // 2 , each循环

        // 隐式迭代,获取属性,只能获取第一个标签的属性和属性值

        // 不会逐一获取所有标签对象的属性和属性值

        // 需要使用循环语法

        // 第二个参数,存储的标签对象,是 js 对象形式,需要 $() 转化为 jQuery 语法形式

        // $().each( (索引,标签对象)=>{} )

 

   <div class="box">

        <ul>

            <li name="ulli" class="active">1</li>

            <li name="ulli">2</li>

            <li name="ulli">3</li>

        </ul>

        <ol>

            <li name="olli" class="active">内容1</li>

            <li name="olli">内容2</li>

            <li name="olli">内容3</li>

        </ol>

    </div>

    <script src="./jquery.min.js"></script>

    <script>

        // 思路:

        //   点击 ul>li 清除 ul>li 和 ol>li 的css样式

        //   给 点击的 ul>li 添加样式

        //   找到索引相同的 ol>li 添加样式

        // jQuery思路:

        //  点标签,给当前标签添加样式,给兄弟标签去除样式

        //  找到父级ul,找到ul下的ol,找到ol中的li,清除所有li样式,找到索引相同的li,添加样式

        // 匿名的事件处理函数,this指向的是 触发事件的标签对象

        // 是 js 标签对象 需要 $(this) 转化为 jQuery标签对象

        $('ul>li').click(function(){   

             $(this).addClass('active')  // 给点击的ul>li添加样式

             .siblings()                 // 找到所有的兄弟标签

             .removeClass('active')      // 给兄弟标签删除样式

             .parent()                   // 当期是ul>li,找父级,是ul

             .next()                     // ul的下一个兄弟是ol

             .find('li')                 // 在ol中找到所有的li

             .removeClass('active')      // 给所有ol>li清除样式

             .eq($(this).index())        // 找到与this索引相同的ol>li

             .addClass('active')         // 添加样式  

            $(this).addClass('active').siblings().removeClass('active').parent().next().find('li').removeClass('active').eq( $(this).index() ).addClass('active');                     

        })