この記事では、タブバーの切り替えコンテンツバーを簡単に実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 HTML+CSS部分 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> /* デフォルトのマージンがあるため、CSS を初期化します*{ margin:0; padding:0;} h1、h2、h3、h4、h5、h6{フォントサイズ:100%; フォントの太さ:通常;} ol,ul{ リストスタイル:なし;} img,fieldset{ border:0 none; display:block;} */ div、ul、li{ ボックスのサイズ: 境界線ボックス; マージン: 0; パディング: 0; } ul{ リストスタイルタイプ: なし; } { テキスト装飾: なし; } #nav{ 幅: 450ピクセル; 高さ: 400px; margin: 100px auto;/*左右中央*/ 背景色: ピンク; パディング: 0; フォントサイズ: 14px; } li{ フロート: 左; 幅: 150ピクセル; 高さ: 30px; テキスト配置: 中央; 行の高さ: 0.6rem; 境界線: 0.02rem 実線 #ccc; } 。コンテンツ{ クリア: 両方; 位置: 相対的; } .コンテンツdiv{ 幅: 450ピクセル; 高さ: 370ピクセル; 位置: 絶対; 表示: なし; } .tab .choose{ 背景色: スカイブルー; } .コンテンツ .現在{ 表示: ブロック; } </スタイル> <script src="jQuery.mini.js"></script> </head> <本文> <div id="nav"> <div class="tab"> <ul> <li class="choose" ><a href="#" > 1</a></li> <li><a href="#" >2</a></li> <li><a href="#" >3</a></li> </ul> </div> <div class="content"> <div class="current">1</div> <div>2</div> <div>3</div> </div> </div> </本文> </html> ネイティブ js コード var lis = document.querySelectorAll('li'); var divs = document.querySelector('.content').querySelectorAll('div'); for(var i=0; i<lis.length; i++){ lis[i].setAttribute('dateIndex',i);//後でコンテンツバーをロックしやすくするために各liのインデックスを設定します lis[i].addEventListener('click',function(){ for(var j=0; j<lis.length; j++){ lis[j].className = ''; //すべてのliのスタイルを空に設定する} this.className = 'choose'; //現在クリックされているliのスタイルを設定する(排他的) var index = this.getAttribute('dateIndex'); //現在のliのインデックスを取得します // コンソール.log(インデックス); for(var j=0; j<lis.length; j++){ divs[j].className = '';//排他的// lis[i].className = 'choose'; } divs[index].className = 'current'; }) } ## jQuery メソッド ```javascript // jQuery メソッド $(function(){ $("li").click(function(){ $(this).addClass("choose"); //現在クリックされているliにスタイルを追加します $(this).siblings("li").removeClass("choose"); //兄弟要素からスタイルを削除します(排他的) var index = $(this).index(); //現在クリックされているliのインデックスを取得します $(".content div").eq(index).show().siblings("div").hide(); // 対応するコンテンツボックスをインデックスで取得し、show() で表示し、兄弟要素を選択して非表示にします。分解 ======》 //$(".content div").eq(index).show(); // $(".content div").eq(index).siblings("div").hide() }) }) 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ドメイン名を指定されたポートに転送するようにNginxを設定する方法
>>: RHEL7.5 mysql 8.0.11 インストールチュートリアル
目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...
Web デザインと開発は大変な作業なので、少数の人だけを対象に設計しないでください。これは外国人が...
MySQL を長い間使用してきた多くの人は、これら 2 つのフィールド属性の概念をまだよく理解して...
信頼性が高く、人気があり、簡単に構成できる Web サーバーである Apache で独自の Web ...
エラー 1290 (HY000) : MySQL サーバーは –secure-file-priv オ...
今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...
この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...
目次セットは値が重複しない特別なコレクションです。セットコレクション基本API独自の価値判断セットを...
背景下のようなリストでは、削除ボタンをクリックすると削除操作を実行する必要があります。 リスト生成:...
質問 1: ブラウザに必要なフォントを表示するように指示するにはどうすればよいでしょうか? フォント...
新しいコンピューターに変更したので、すべての環境を新しいコンピューター上で設定する必要があります。ふ...
目次前述のVARCHAR型VARCHAR適用可能な状況CHAR型テストVARCHAR(5)とVARC...
MySQL ロックの概要他のデータベースと比較すると、MySQL のロック メカニズムは比較的単純で...
序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...
目次序文オンラインXMLエディタの必要性テクノロジー事前調査ビジュアルプログラミングVSCODEプラ...