JQuery-实现Tab-栏切换

Tab-栏切换实战

• 效果演示
  

• css源码（注意权重问题）

   * {
              margin: 0;
              padding: 0;
          }
  
          .box {
              width: 960px;
              height: 100%;
              margin: 100px auto;
          }
  
          .box .tab-item {}
  
          .tab-item ul {
              list-style: none;
              overflow: hidden;
              width: 100%;
              border-bottom: 4px solid rgba(0, 0, 0, .5);
              margin-bottom: 3px;
          }
  
          .tab-item ul li {
              float: left;
              width: 140px;
              height: 35px;
              color: #bfc;
              text-align: center;
              line-height: 35px;
              background-color: pink;
              margin-right: 10px;
              cursor: pointer;
              transition: all .5s;
          }
  
          .content {
              position: relative;
          }
  
          .content .item {
              position: absolute;
              width: 100%;
              height: 200px;
              display: none;
              background-color: skyblue;
          }
  
          .tab-item ul .current {
              width: 140px;
              height: 35px;
              color: red;
              background-color: #09f;
          }
  

• html结构

      <div class="box">
          <div class="tab-item">
              <ul>
                  <li class="current">测试文本 1</li>
                  <li>测试文本 2</li>
                  <li>测试文本 3</li>
                  <li>测试文本 4</li>
                  <li>测试文本 5</li>
              </ul>
          </div>
          <div class="content">
              <div class="item" style="display: block;"> 测试文本 1</div>
              <div class="item"> 测试文本 2</div>
              <div class="item"> 测试文本 3</div>
              <div class="item"> 测试文本 4</div>
              <div class="item"> 测试文本 5</div>
          </div>
      </div>
  

• JS原理分析

          $(function () {
              $('.tab-item>ul>li').click(function () {
                  // li 点击谁谁获取该类 他的兄弟移除该类
                  $(this).addClass('current').siblings().removeClass('current');
                  // 获取点击元素的 index 
                  var index = $(this).index();
                  // item 对应的 index 显示
                  $('.content>.item').eq(index).show().siblings().hide();
              })
          })