用jQuery5行搞定选项卡功能利用jQuery写一个选项卡

利用jQuery写一个选项卡
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.min.css">
    <style>
        .tabBox {
            margin: 20px auto;
            width: 500px;
        }

        .tabBox .tab {
            position: relative;
            top: 1px;
        }

        .tabBox .tab li {
            float: left;
            margin-right: 10px;
            padding: 0 10px;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            border: 1px solid #AAA;
            background: #f6f7fb;
            cursor: pointer;
        }

        .tabBox .tab li.active {
            background: #FFF;
            border-bottom-color: #FFF;
        }

        .tabBox div {
            display: none;
            padding: 10px;
            height: 100px;
            border: 1px solid #AAA;
            background: #FFF;
        }

        .tabBox div.active {
            display: block;
        }
    </style>
</head>

<body>
    <section class="tabBox" id="tabBox">
        <!-- 页卡 -->
        <ul class="tab clearfix">
            <li class="active">编程</li>
            <li>读书</li>
            <li>运动</li>
        </ul>
        <!-- 页卡对应的内容（有几个页卡，对应几个内容） -->
        <div class="active">编程可以使我“赚取高薪”</div>
        <div>读书可以使我“修身养性”</div>
        <div>运动可以使我“身体健康”</div>
    </section>
    <section class="tabBox" id="tabBox2">
        <!-- 页卡 -->
        <ul class="tab clearfix">
            <li class="active">编程</li>
            <li>读书</li>
            <li>运动</li>
        </ul>
        <!-- 页卡对应的内容（有几个页卡，对应几个内容） -->
        <div class="active">编程可以使我“赚取高薪”</div>
        <div>读书可以使我“修身养性”</div>
        <div>运动可以使我“身体健康”</div>
    </section>
    <section class="tabBox" id="tabBox3">
        <!-- 页卡 -->
        <ul class="tab clearfix">
            <li class="active">编程</li>
            <li>读书</li>
            <li>运动</li>
        </ul>
        <!-- 页卡对应的内容（有几个页卡，对应几个内容） -->
        <div class="active">编程可以使我“赚取高薪”</div>
        <div>读书可以使我“修身养性”</div>
        <div>运动可以使我“身体健康”</div>
    </section>
</body>

</html>
<script src="../JQ/jquery-3.3.1.js"></script>
<script>
    //不需要做循环操作,JQ已经帮我们做了
    // $('li').on('click', function () {
    //     //this是当前点击的这个原生元素
    //     //给当前点击的这个元素加上active类名; 让其他兄弟元素移除active类名;
    //     $(this).addClass('active').siblings().removeClass('active');
    //     let n = $(this).index(); //n是当前点击的这个li的索引
    //     //$('div')[n]  当前点击的这个li对应的div(原生DOM)  给他添加active类名,让他的兄弟们移除active类名
    //     // $($('div')[n]).addClass('active').siblings().removeClass('active');
    //     //eq(n)是拿到对应索引的JQ类型的
    //     $('div').eq(n).addClass('active').siblings().removeClass('active');
    // });
    $.fn.extend({
        tab: function () {
            let _this = this;//因为时间对应的回调函数中的this不是当前这个函数的this,所以用一个变量_this来接收
            $('li',_this).on('click', function () {
                $(this).addClass('active').siblings().removeClass('active');
                let n = $(this).index();
                $('div',_this).eq(n).addClass('active').siblings().removeClass('active');
            });
        }
    });
    $('#tabBox').tab();
    $('#tabBox2').tab();
    $('#tabBox3').tab();
</script>