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

タブステータスバーの切り替え効果を実現するための 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript でタブ切り替えを実装する 4 つの方法
  • 合理化されたJS DIVレイヤータブ切り替えコード
  • js (JavaScript) で TAB タグ切り替え効果の簡単な例を実現する
  • タブ切り替え効果をJavaScriptで実現(自作ネイティブjs)
  • タブ切り替え効果を実現するVue.jsコンポーネントタブ
  • タブ切り替えを実現するネイティブjs
  • jQuery を使用して div タブを切り替えるためのサンプル コード
  • タブ切り替えのjQueryバージョン
  • jQuery シンプルなタブ切り替えエフェクト実装方法
  • jQueryで実装したタブスライドと画像切り替え(複数のエフェクト)のまとめ

<<:  MySQLのスリープ関数の特殊現象例の詳しい説明

>>:  Docker で SVN サーバーを構築するチュートリアル

推薦する

モバイル アプリのユーザー インターフェース設計に関する 10 のヒント

ヒント1: 集中力を保つ最高のモバイル アプリは、1 つのことを非常にうまく行うことに重点を置いてい...

MySql データベースにリモートでログインするにはどうすればよいですか?

はじめに: プロジェクトを開発するために、サーバーに MySql データベース サーバーを展開し、ロ...

Bツリーの特性の紹介

B ツリーは一般的なデータ構造です。彼と一緒にB+ツリーがあります。ここで、概念を明確にする必要があ...

Docker で Springboot プロジェクトを実行する実装

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

Window.nameはクロスドメインデータ転送の問題を解決します

<br />原文: http://research.microsoft.com/~hel...

Node.js ファイルのコピー、フォルダの作成、その他の関連操作

NodeJS は次のファイルをコピーします:通常、小さなファイルのコピー操作では、ストリーム パイプ...

Linux でコマンドまたはプロセスの実行時間を調べる方法

Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...

React イベントバインディングの詳細

目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...

MySQL 5.7.27 のダウンロード、インストール、設定に関する詳細なチュートリアル

目次1. ダウンロード手順2. 環境変数を設定する3. my.iniファイルを設定する4. MySQ...

理論: 2年間のユーザーエクスペリエンス

<br />国内のウェブサイトが本格的に普及し、ユーザーエクスペリエンスに重点が置かれる...

HTML で JavaScript の全選択/全選択解除操作を実行するサンプル コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

MySQL での GROUP_CONCAT の使用例の分析

この記事では、例を使用して、MySQL で GROUP_CONCAT を使用する方法について説明しま...

jQuery を使用して、iframe 下の無効なページ アンカー ポイントの問題を修正する

適用シナリオ: iframe ページにスクロール バーがなく、親ウィンドウにスクロール バーが表示さ...