タブステータスバーの切り替え効果を実現するための js と jQuery

今日は、タブバーをクリックして切り替えるという目的を実現するために、js と jQuery を使用する簡単なケースを作成します。効果は次のようになります。

コードは次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>ステータスバースイッチ</title>
  <スタイル>
   * {
    マージン: 0;
    パディング: 0;
    ボックスのサイズ: 境界線ボックス;
   }
 
   。主要 {
    幅: 720ピクセル;
    表示: ブロック;
    マージン: 50px 自動;
   }
 
   .table-title {
    幅: 100%;
    高さ: 100%;
    境界線: 1px 黒一色;
   }
 
   .table-title ul {
    リストスタイル: なし;
    ディスプレイ: フレックス;
   }
 
   .table-title li {
    幅: 25%;
    高さ: 100%;
    背景色: ゲインズボロ;
    テキスト配置: 中央;
    border-right: 1px 黒一色;
    カーソル: ポインタ;
   }
 
   .table-title li:最後の子 {
    右境界線: なし;
   }
 
   .table-title li ラベル {
    テキスト配置: 中央;
    カーソル: ポインタ;
   }
 
   .タブボックス .タブ表示 {
    表示: なし;
    境界線: 1px 黒一色;
    上境界線: なし;
    テキスト配置: 中央;
   }
 
   /* 最初のフレームを表示します */
   .tab-box .tab-show:first-Child {
    表示: ブロック;
   }
 
   。変化 {
    不透明度: 0.7;
   }
  </スタイル>
  <script src="js/jquery-3.5.1.js"></script>
  <スクリプト>
   // js は window.onload = function() { を実装します
    //要素を取得する var allLi = document.getElementsByTagName("li");
    var ボックス = document.getElementsByClassName("タブボックス")[0].children;
    //切り替え効果を実現するためのトラバーサル for (var i = 0; i < allLi.length; i++) {
     //各liの属性インデックス値を定義します。allLi[i].index = i; 
     //クリックイベントを追加 allLi[i].onclick = function() {
      //インデックス値を取得します。var index = this.index;
      //コンテンツボックスを表示する[index].style.display="block";
      allLi[インデックス].style.opacity=0.7;
      (var j = 0; j < allLi.length; j++) の場合 {
       //兄弟要素のスタイルを元に戻す if(j != index){
        ボックス[j].style.display="なし";
        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");
    });
   });
  </スクリプト>
 </head>
 <本文>
  <div class="main">
   <div class="テーブルタイトル">
    <ul>
     <li><label>携帯電話デジタル</label></li>
     <li><label>コンピューター作業</label></li>
     <li><label>日用品</label></li>
     <li><label>家庭に欠かせないもの</label></li>
    </ul>
   </div>
   <div class="tab-box" style="幅: 100%;高さ: calc(100%-40px);">
    <div class="tab-show">
     携帯電話デジタル
    <div class="tab-show">
     コンピュータオフィス</div>
    <div class="tab-show">
     日用品
    <div class="tab-show">
     家庭の必需品</div>
   </div>
  </div>
 </本文>
</html>

さらに詳しく知りたい場合は、次の2つの素晴らしいトピックをクリックしてください。JavaScriptタブ操作方法の概要jQueryタブ操作方法の概要

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: