js和jquery實現(xiàn)tab狀態(tài)欄切換效果

更新時間：2021年08月10日 17:14:05 作者：過而不及__

這篇文章主要為大家詳細介紹了js和jquery實現(xiàn)tab狀態(tài)欄切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天做一個簡單的小案例，用js和jquery分別去實現(xiàn)點擊tab欄，實現(xiàn)切換的目的，效果如下圖：

代碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>狀態(tài)欄切換</title>
  <style>
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }
 
   .main {
    width: 720px;
    display: block;
    margin: 50px auto;
   }
 
   .table-title {
    width: 100%;
    height: 100%;
    border: 1px solid black;
   }
 
   .table-title ul {
    list-style: none;
    display: flex;
   }
 
   .table-title li {
    width: 25%;
    height: 100%;
    background-color: gainsboro;
    text-align: center;
    border-right: 1px solid black;
    cursor: pointer;
   }
 
   .table-title li:last-child {
    border-right: none;
   }
 
   .table-title li label {
    text-align: center;
    cursor: pointer;
   }
 
   .tab-box .tab-show {
    display: none;
    border: 1px solid black;
    border-top: none;
    text-align: center;
   }
 
   /* 讓第一個框顯示出來 */
   .tab-box .tab-show:first-Child {
    display: block;
   }
 
   .change {
    opacity: 0.7;
   }
  </style>
  <script src="js/jquery-3.5.1.js"></script>
  <script>
   // js實現(xiàn)
   window.onload = function() {
    //獲取元素
    var allLi = document.getElementsByTagName("li");
    var boxs = document.getElementsByClassName("tab-box")[0].children;
    //遍歷進行切換效果的實現(xiàn)
    for (var i = 0; i < allLi.length; i++) {
     //給每個li定義一個屬性索引值
     allLi[i].index = i; 
     //添加點擊事件
     allLi[i].onclick = function() {
      //獲取索引值
      var index = this.index;
      //展示內(nèi)容
      boxs[index].style.display="block";
      allLi[index].style.opacity=0.7;
      for (var j = 0; j < allLi.length; j++) {
       //將兄弟元素的樣式改回
       if(j != index){
        boxs[j].style.display="none";
        allLi[j].style.opacity=1;
       }
      }
     }
    }
   }
   // jquery實現(xiàn)
   $().ready(function() {
    $(".table-title li").click(function() {
     //通過 .index()方法獲取元素下標，從0開始，賦值給某個變量
     var _index = $(this).index();
     //讓內(nèi)容框的第 _index 個顯示出來，其他的被隱藏
     $(".tab-box>div").eq(_index).show().siblings().hide();
     //改變選中時候的選項框的樣式，移除其他幾個選項的樣式
     $(this).addClass("change").siblings().removeClass("change");
    });
   });
  </script>
 </head>
 <body>
  <div class="main">
   <div class="table-title">
    <ul>
     <li><label>手機數(shù)碼</label></li>
     <li><label>電腦辦公</label></li>
     <li><label>生活用品</label></li>
     <li><label>居家必備</label></li>
    </ul>
   </div>
   <div class="tab-box" style="width: 100%;height: calc(100%-40px);">
    <div class="tab-show">
     手機數(shù)碼
    </div>
    <div class="tab-show">
     電腦辦公
    </div>
    <div class="tab-show">
     生活用品
    </div>
    <div class="tab-show">
     居家必備
    </div>
   </div>
  </div>
 </body>
</html>

如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: