技術標籤：jquerycsshtml

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();
              })
          })