この記事では、タブバーの切り替えコンテンツバーを簡単に実現するための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 インストールチュートリアル
入力タグタイプがファイルで、タグ内にaccpet="image/*"属性が設定さ...
MySQL スロー クエリ (正式名称はスロー クエリ ログ) は、MySQL によって提供されるロ...
この記事では、マウスを動かしたときにセカンダリ メニュー バーを実装するために HTML+CSS を...
1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...
実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...
私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...
1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...
目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...
1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...
ある会社の BI 職の面接を受けたとき、面接で SQL に関する質問がありました。一見すると非常に簡...
序文このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の...
この記事では、配列フィルタリングを実装するためのJavaScriptの具体的なコードを参考までに紹介...
ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...
あるウェブサイトでは、ユーザーが WebKit カーネルでページを開くことを期待して、HTML5 と...
=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の場合は等号の効果があ...