原生 JavaScript 进阶（三） - 10 - 案例：jQuery 版选项卡 - 《JavaScript 学习笔记》

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <!-- IMPORT CSS -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .tabBox {
            box-sizing: border-box;
            margin: 20px auto;
            width: 500px;
        }
        .navBox {
            display: flex;
            position: relative;
            top: 1px;
        }
        .navBox li {
            box-sizing: border-box;
            margin-right: 10px;
            padding: 0 10px;
            line-height: 35px;
            border: 1px solid #999;
        }
        .navBox li.active {
            border-bottom-color: #FFF;
        }
        .tabBox>div {
            display: none;
            box-sizing: border-box;
            padding: 10px;
            height: 150px;
            border: 1px solid #999;
        }
        .tabBox>div.active {
            display: block;
        }
    </style>
    <script>
        // 在结构加载之前获取元素肯定获取不到，所以我们一般把 JS 放到 BODY 末尾（就是为了等待结构加载完再去获取元素）
        // let tabBox = document.getElementById('tabBox');
        // console.log(tabBox); // null
        // 1.如果不需要获取页面中的元素，放到哪都可以
        // 2.就是想放到开头，还想获取元素，可以基于 window.onload 或者 JQ 中的 $(document).ready() 来处理
    </script>
</head>
<body>
    <div class="tabBox">
        <ul class="navBox">
            <li class="active">编程</li>
            <li>读书</li>
            <li>运动</li>
        </ul>
        <div class="active">编程使我快乐</div>
        <div>读书使我幸福</div>
        <div>运动使我健康</div>
    </div>
    <!-- IMPORT JS -->
    <script>
        // 链式调用方式，有点浪费性能
        $('.tabBox>.navBox>li').click(function () {
            let n = $(this).index();
            $(this).addClass('active')
                .siblings().removeClass('active')
                .parent()
                .nextAll('div').eq(n).addClass('active')
                .siblings().removeClass('active');
        });
    </script>
    <script>
        /* 
         * $([function])：等待页面中所有的 DOM 结构加载完成才会执行这个方法 
         * => $(document).ready([function])
         *  
         * window.onload=function () {} ：等待页面中所有的资源（DOM 结构、内容、其它的富媒体资源等）
     都加载完成才会执行函数
         */
        /* $(function () {
            // 选项卡正常思路：给所有的 LI 绑定点击事件 ，当点击某一个 LI 的时候，让其有选中样式，而其余的LI 都移除选中样式，同时对应索引的 DIV 有选中样式，其余的 DIV 移除选中样式即可，这样就可以实现选项卡切换效果
            let $tabBox = $('#tabBox'),
                $navList = $tabBox.find('#navBox>li'),
                $divList = $tabBox.children('div');
            // JQ 特性：内置循环处理机制（基于一个 JQ 集合去操作某个方法，我们无需循环每一项单独操作，JQ 内部帮我们循环处理了，例如：$navList.css('color','#000')集合中有100项，JQ 会把100项都设置了这个样式，无需自己循环处理 ）
            $navList.on('click', function () {
                // THIS:当前点击操作的元素 => $(this)此能调取 JQ 方法
                // JQ特性：链式写法
                let n = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                // 根据点击 LI 的索引，在 DIV 集合中找到对应的那一项，然后这一项选中，它的兄弟项都移除选中即可
                $divList.eq(n).addClass('active').siblings().removeClass('active');
            });
            基于 JQ 中的 EACH 遍历集合中的每一项，绑定点击事件
            $navList.each(function (index, $item) {
             // 参数顺序和内置的 FOR-EACH 是反着的
             // index:当前循环这一项的索引
             // $item:当前循环的这一项 
             // this === $item：当前方法中的 THIS 也是循环的这一项
            $item.on('click', function () {
            ...
                });
            });
            $navList.each((index, $item) => {
                // THIS 不再是循环的这一项（箭头函数中没有 THIS）
            });
        }); */
    </script>
</body>
</html>