HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  6.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
  7.     <title>珠峰培训</title>
  8.     <!-- IMPORT CSS -->
  9.     <link rel="stylesheet" href="./css/reset.min.css" />
  10.     <style>
  11.         .tabBox {
  12.             margin: 20px auto;
  13.             width: 500px;
  14.         }
  16.         .tabBox .tab {
  17.             position: relative;
  18.             top: 1px;
  19.         }
  21.         .tabBox .tab li {
  22.             float: left;
  23.             margin-right: 10px;
  24.             padding: 0 10px;
  25.             height: 35px;
  26.             line-height: 35px;
  27.             font-size: 14px;
  28.             border: 1px solid #aaa;
  29.             background: #f6f7fb;
  30.             cursor: pointer;
  31.         }
  33.         .tabBox .tab li.active {
  34.             background: #fff;
  35.             border-bottom-color: #fff;
  36.         }
  38.         .tabBox div {
  39.             display: none;
  40.             padding: 10px;
  41.             height: 100px;
  42.             border: 1px solid #aaa;
  43.             background: #fff;
  44.         }
  46.         .tabBox div.active {
  47.             display: block;
  48.         }
  49.     </style>
  50. </head>
  52. <body>
  53.     <section class="tabBox" id="tabBox">
  54.         <ul class="tab clearfix">
  55.             <li class="active">编程</li>
  56.             <li>读书</li>
  57.             <li>运动</li>
  58.         </ul>
  59.         <div class="active">编程可以使我“赚取高薪”</div>
  60.         <div>读书可以使我“修身养性”</div>
  61.         <div>运动可以使我“身体健康”</div>
  62.     </section>
  64.     <section class="tabBox" id="tabBox2">
  65.         <ul class="tab clearfix">
  66.             <li class="active">编程</li>
  67.             <li>读书</li>
  68.             <li>运动</li>
  69.         </ul>
  70.         <div class="active">编程可以使我“赚取高薪”</div>
  71.         <div>读书可以使我“修身养性”</div>
  72.         <div>运动可以使我“身体健康”</div>
  73.     </section>
  74.     <section class="tabBox" id="tabBox3">
  75.         <ul class="tab clearfix">
  76.             <li class="active">编程</li>
  77.             <li>读书</li>
  78.             <li>运动</li>
  79.         </ul>
  80.         <div class="active">编程可以使我“赚取高薪”</div>
  81.         <div>读书可以使我“修身养性”</div>
  82.         <div>运动可以使我“身体健康”</div>
  83.     </section>
  84. </body>
  85. <script src="./js/jquery.min.js"></script>
  86. </html>

单个方法

 $(function () {
        // 绑定点击事件
        $("li").click(function () {
            // console.log(this);//原生对象
            // 给点击的元素增加active
            $(this).addClass('active').siblings().removeClass("active");
            let $index=$(this).index();
            $("div").eq($index).addClass('active').siblings().removeClass("active");
        });
});

选项卡jq封装

extend方法在jQuery原型上封装函数

$.fn.extend({
        tab: function () {
            //console.log(this)
            //this是tab执行点前面的，this也是我们增选项卡的范围
            // #tabbox 里面的li
            let _this=this;
            $('li', this).click(function () {
                //自己点击元素添加样式 移除兄弟元素的active
                $(this).addClass('active').siblings().removeClass("active");
                let $index = $(this).index();
                $('div',_this).eq($index).addClass('active').siblings().removeClass("active");
            });
        }
});
$("#tabBox").tab();
$("#tabBox2").tab();
$("#tabBox3").tab();