tabSwitchObject.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>轮播切换组件化</title>
    <style media="screen">
    ul,li{
      margin: 0;
      padding: 0;
    }
    #ct{
      border: 1px solid #ccc;
      width: 600px;
      height: 150px;
      border-radius: 5px;
      list-style: none;
      margin-top: 20px;
    }
    .nav{
      border: 1px solid #ccc;
      /*border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;*/
      padding: 10px;
      border-radius: 4px 4px 0  0;
      display: inline-block;
      margin-top: 30px;
      margin-bottom: -1px;
      /*margin-left: 0;*/
      font-size: 17px;
      font-family: "微软雅黑";
      cursor: pointer;
    }
    .nav:first-child{
      margin-left: 8px;
    }
    .nav:hover{
      color: red;
    }
    .navBox .active{
      border-bottom: 1px solid #fff;
      color: red;
    }
    .navBox{
      border-bottom: 1px solid #ccc;
      width: 600px;
      margin: 0 auto;
      padding-left: 0;
      list-style: none;
    }
    .content{
      list-style: none;
    }
    .content .cot{
      display: none;
      margin: 10px;
    }
    .content .cot.active{
      display: block;
    }

    </style>
  </head>
  <body>
    <div id="ct">
      <ul class="navBox">
        <li class="nav active">选项一</li>
        <li class="nav">选项二</li>
        <li class="nav">选项三</li>
      </ul>
      <ul class="content">
        <li class="cot active">内容一</li>
        <li class="cot">内容二</li>
        <li class="cot">内容三</li>
      </ul>
    </div>

    <div id="ct">
      <ul class="navBox">
        <li class="nav active">选项一</li>
        <li class="nav">选项二</li>
        <li class="nav">选项三</li>
        <li class="nav">选项四</li>
      </ul>
      <ul class="content">
        <li class="cot active">内容一</li>
        <li class="cot">内容二</li>
        <li class="cot">内容三</li>
        <li class="cot">内容四</li>
      </ul>
    </div>

    <div id="ct">
      <ul class="navBox">
        <li class="nav active">选项一</li>
        <li class="nav">选项二</li>
        <li class="nav">选项三</li>
        <li class="nav">选项四</li>
      </ul>
      <ul class="content">
        <li class="cot active">内容一</li>
        <li class="cot">内容二</li>
        <li class="cot">内容三</li>
        <li class="cot">内容四</li>
      </ul>
    </div>

    <!-- <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script> -->
    <script type="text/javascript">

      function Tab(ct){
        this.ct = ct;
        this.init();
        this.bind();
    };

    Tab.prototype.init = function(){
      this.tabLists = this.ct.querySelectorAll('.navBox .nav');
      this.tabPanels = this.ct.querySelectorAll('.content .cot');
    };
      Tab.prototype.bind = function(){
        var _this = this;
        this.tabLists.forEach(function(tabList){
          tabList.onclick = function(e){
            var target = e.target;
            idx =[].indexOf.call(_this.tabLists,target);

            _this.tabLists.forEach(function(li){
              li.classList.remove('active');
            })
            target.classList.add('active');  //classList是一个只读属性，返回一个元素的类属性的实时集合。

        _this.tabPanels.forEach(function(panel){
            panel.classList.remove('active');
        })
            _this.tabPanels[idx].classList.add('active');
          };
        });
      }


      var tab1 = new Tab(document.querySelectorAll('#ct')[0]);
      var tab2 = new Tab(document.querySelectorAll('#ct')[1]);
      var tab2 = new Tab(document.querySelectorAll('#ct')[2]);


      // $('.nav').on('click',function(){
      //   var idx = $(this).index();
      //   $(this).siblings().removeClass('active');
      //   $(this).addClass('active');
      //
      //   $(this).parents('#ct').find('.content >li').removeClass('active');
      //   $(this).parents('#ct').find('.content >li').eq(idx).addClass('active');


    </script>
  </body>
</html>