この記事では、タブバーの切り替え効果を簡単に実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 1. タブバー - ケース1タブバー分析 liでの分析 jsを使用して非表示と表示を実現する 排他的な考え方: 1) すべての要素のすべてのスタイルをクリアする(他のスタイルは削除する) 私の考え: コード実装: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> * { マージン: 0; パディング: 0; } li { リストスタイル: なし; } { テキスト装飾: なし; 色: #666; } .垂直タブ{ 幅: 980ピクセル; マージン: 100px 自動; } .垂直タブ .nav { 幅: 200ピクセル; リストスタイル: なし; } .垂直タブ .nav-tabs1 { フロート: 左; 右境界線: 3px 実線 #e7e7e7; } .垂直タブ .nav-tabs2 { フロート: 右; 左境界線: 3px 実線 #e7e7e7; } .vertical-tab li a { 表示: ブロック; パディング: 10px 20px; テキスト配置: 中央; テキスト変換:大文字; 文字間隔: 1px; フォントサイズ: 18px; フォントの太さ: 700; } .垂直タブ .アクティブ { 色: #198df8; } .垂直タブ .タブ { 幅: 500ピクセル; フロート: 左; } .垂直タブ .タブコンテンツ { パディング: 10px 20px; テキスト変換:大文字; 文字間隔: 1px; } .垂直タブ .タブコンテンツ h3 { 色: #333; マージン: 0 0 10px 0; } .垂直タブ .タブコンテンツ p { フォントサイズ: 12px; } .垂直タブ .隠し{ 表示: なし; } </スタイル> </head> <本文> <div class="垂直タブ"> <ul class="nav nav-tabs1"> <li><a href="javascript:;" class="active" index="1">セクション 1</a></li> <li><a href="javascript:;" index='2'>セクション 2</a></li> <li><a href="javascript:;" index="3">セクション 3</a></li> </ul> <div class="タブコンテンツタブ"> <div class="tab-content1"> <h3>セクション 1</h3> <p>コンテンツ 1</p> </div> <div class="tab-content1 非表示"> <h3>セクション 2</h3> <p>コンテンツ 2</p> </div> <div class="tab-content1 非表示"> <h3>セクション 3</h3> <p>コンテンツ 3</p> </div> <div class="tab-content1 非表示"> <h3>セクション 4</h3> <p>コンテンツ 4</p> </div> <div class="tab-content1 非表示"> <h3>セクション 5</h3> <p>コンテンツ 5</p> </div> <div class="tab-content1 非表示"> <h3>セクション 6</h3> <p>コンテンツ 6</p> </div> </div> <ul class="nav nav-tabs2"> <li><a href="javascript:;" index="4">セクション 4</a></li> <li><a href="javascript:;" index="5">セクション 5</a></li> <li><a href="javascript:;" index="6">セクション 6</a></li> </ul> </div> <スクリプト> var as = document.querySelectorAll("a") var 項目 = document.querySelectorAll(".tab-content1") コンソール.log(として) // コンソール.log(lis) (var i = 0; i < as.length; i++) の場合 { as[i].addEventListener('click', 関数() { // 他のものを殺す for (var j = 0; j < as.length; j++) { as[j].className = '' } // 自分自身を残す this.className = "active" // コンテンツを表示 var index = this.getAttribute('index') コンソール.log(インデックス) // 他のものを殺す for (var i = 0; i < item.length; i++) { 項目[i].style.display = "なし" } // 自分自身を残す item[index - 1].style.display = "block" }) } </スクリプト> </本文> </html> Vue 実装 Vueは実装が比較的簡単で、v-ifとv-forを柔軟に使用するだけで済みます。 特定のコード: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> * { マージン: 0; パディング: 0; } .垂直タブ{ 幅: 920ピクセル; マージン: 100px 自動; } .垂直タブ .nav { リストスタイル: なし; 幅: 200ピクセル; } .垂直タブ .nav-tabs1 { 右境界線: 3px 実線 #e7e7e7; } .垂直タブ .nav-tabs2 { 左境界線: 3px 実線 #e7e7e7; } .垂直タブ .nav a { 表示: ブロック; フォントサイズ: 18px; フォントの太さ: 700; テキスト配置: 中央; 文字間隔: 1px; テキスト変換:大文字; パディング: 10px 20px; マージン: 0 0 1px 0; テキスト装飾: なし; } .垂直タブ .タブコンテンツ { 色: #555; 背景色: #fff; フォントサイズ: 15px; 文字間隔: 1px; 行の高さ: 23px; パディング: 10px 15px 10px 25px; 表示: テーブルセル; 位置: 相対的; } .垂直タブ .nav-tabs1 { フロート: 左; } .垂直タブ .タブ { 幅: 500ピクセル; ボックスのサイズ: 境界線ボックス; フロート: 左; } .垂直タブ .タブコンテンツ h3 { フォントの太さ: 600; テキスト変換:大文字; マージン: 0 0 5px 0; } .垂直タブ .nav-tabs2 { フロート: 右; } .タブコンテンツ{ 位置: 相対的; } .タブコンテンツ .タブペイン { 位置: 絶対; 上: 10px; 左: 20px; } .nav li.active a { 色: #198df8; 背景: #fff; 境界線: なし; } .フェード{ 不透明度: 0; 遷移: すべて .3 秒線形。 } .フェード.アクティブ{ 不透明度: 1; } </スタイル> </head> <本文> <div class="vertical-tab" id="app"> <!-- ナビゲーション タブ --> <ul class="nav nav-tabs1"> <li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li> </ul> <!-- タブ ペイン --> <div class="タブコンテンツタブ"> <div class="tab-pane fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'> <h3>{{item.title}}</h3> <p>{{item.content} </p> </div> </div> <!-- ナビゲーション タブ --> <ul class="nav nav-tabs2"> <li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li> </ul> </div> <script type="text/javascript" src="js/vue.js"></script> <スクリプト> 新しいVue({ el: "#app", データ: { currentIndex: 0, // タブリストの現在のインデックス: [{ id: 1, タイトル: 「セクション 1」、 コンテンツ: 'content1' }, { id: 2, タイトル: 「セクション2」 コンテンツ: 'content2' }, { id: 3, タイトル: 「セクション3」 コンテンツ: 'content3' }, { id: 4, タイトル: 「セクション4」 コンテンツ: 'content4' }, { id: 5, タイトル: 「セクション 5」、 コンテンツ: 'content5' }, { id: 6, タイトル: 「セクション 6」 コンテンツ: 'content6' }] }, メソッド: { 変更(インデックス、フラグ) { if (フラグ) { コンソール.log(インデックス) this.currentIndex = インデックス; } それ以外 { this.currentIndex = インデックス; } } } }) </スクリプト> </本文> さらに詳しく知りたい場合は、次の2つの素晴らしいトピックをクリックしてください。JavaScriptタブ操作方法の概要jQueryタブ操作方法の概要 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLはOracleシーケンスに似たソリューションを実装しています
>>: Docker デプロイメント Springboot プロジェクト例の分析
Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....
目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...
1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...
この記事では、参考までにMySQL 8.0.15のインストールと設定のグラフィックチュートリアルを紹...
背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...
最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...
目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...
目次インストールルーティングの基本構成Vue にルーターをインストールするルーターの設定Router...
UniappにはDingTalk認証ログインがないため、この記事ではDingTalk QRコードログ...
基本環境パゴダ設置サービスパゴダにインストールされた[Pythonプロジェクトマネージャー]パゴダに...
1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...
<br />質問: Word のコンテンツを Web サイトのエディターに直接コピーする...
この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...
序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...
序文最近、小さなデモを作成しました。大規模な工場のオンライン データを使用したため、インターフェイス...