今日は、タブ バーをクリックして切り替えるという目的を実現するために、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker で SVN サーバーを構築するチュートリアル
ヒント1: 集中力を保つ最高のモバイル アプリは、1 つのことを非常にうまく行うことに重点を置いてい...
はじめに: プロジェクトを開発するために、サーバーに MySql データベース サーバーを展開し、ロ...
B ツリーは一般的なデータ構造です。彼と一緒にB+ツリーがあります。ここで、概念を明確にする必要があ...
導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...
この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...
<br />原文: http://research.microsoft.com/~hel...
主に、Nginx で X-Frame-Options、X-XSS-Protection、X-Cont...
NodeJS は次のファイルをコピーします:通常、小さなファイルのコピー操作では、ストリーム パイプ...
Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...
目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...
目次1. ダウンロード手順2. 環境変数を設定する3. my.iniファイルを設定する4. MySQ...
<br />国内のウェブサイトが本格的に普及し、ユーザーエクスペリエンスに重点が置かれる...
コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...
この記事では、例を使用して、MySQL で GROUP_CONCAT を使用する方法について説明しま...
適用シナリオ: iframe ページにスクロール バーがなく、親ウィンドウにスクロール バーが表示さ...