js和jquery實現tab狀態列切換效果

今天做一個簡單的小案例，用和分別去實現點選tab欄，實現切換的目的，效果如下圖：

程式碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utfhttp://www.cppcns.com-8">
  <title>狀態列切換</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:lmqKeZLN 
ast-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實現
   window.onload = function() {
    //獲取元素
    var allLi = document.getElementsByTagName("li");
    var boxs = document.getElementsByClassName("tab-box")[0].children;
    //遍歷進行切換效果的實現
    for (var i = 0; i < allLi.length; i++) {
     //給每個li定義一個屬性索引值
     allLi[i].imqKeZLN 
ndex = i; 
     //新增點選事件
     allLi[i].onclick = function() {
      //獲取索引值
      var index = this.index;
      //展示內容
      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實現
   $().ready(function() {
    $(".table-title li").click(function() {
     //通過 .index()方法獲取元素下標，從0開始，賦值給某個變數
     var _index = $(this).index();
     //讓內容框的第 _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>手機數碼</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">
     手機數碼
    </div>
    http://www.cppcns.com 
<div class="tab-show">
     電腦辦公
    </div>
    <div class="tab-show">
     生活用品
    </div>
    <div class="tab-show">
     居家必備
    </div>
   </div>
  </div>
 </body>
</html>

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

js和jquery實現tab狀態列切換效果

js和jquery實現tab狀態列切換效果

qt tablewidget 實現tab來回切換_原生JS實現TAB選項卡切換效果

我用 JS 和 CSS 實現了 win10 網格懸停效果

JQuery-實現Tab-欄切換

jQuery實現tab欄切換效果

Ajax——原生Js實現和Jquery實現

JavaScript實現Tab選項卡切換

js、jquery實現列表模糊搜尋功能過程解析

Js和VUE實現跑馬燈效果

JavaScript實現Tab標籤頁切換的最簡便方式(4種)

jQuery實現頁面導航內容定位效果，並支援內容切換

bootstrap實現tab選項卡切換

Android 實現頂部狀態列的沉浸模式（任意設定狀態列的顏色）

天貓首頁天貓超市下的選項卡(加自動輪播效果)仿寫（js加jquery實現動態效果）

js和jquery判斷資料型別的4種方法總結

使用js和canvas實現時鐘效果

js和jquery設定css樣式的幾種方法

原生 JS 和 jQuery 檢查某元素是否存在

js和vue實現曲線運動

pdfh5.js 基於pdf.js和jQuery，web/h5/移動端PDF預覽手勢縮放外掛。

js和jquery實現tab狀態列切換效果

相關推薦