この記事では、タブバーの切り替え効果を簡単に実現するための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 プロジェクト例の分析
insert into employee values(null,'張三','...
環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...
目次1. nodejsをダウンロードする2. ダブルクリックしてインストール3. グローバル npm...
/etc/my.cnf または /etc/mysql/my.cnf ファイルを変更する [クライアン...
オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...
目次rocketmqイメージを取得する名前rvを作成する単一のブローカーノードを作成するrocket...
ウェブフロントエンド最適化のベストプラクティス: コンテンツWebフロントエンド最適化のベストプラク...
目次Vue モニターのプロパティリスナープロパティとは何ですか?リスニングプロパティと計算プロパティ...
1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...
この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...
1. MySQLデータベースをダウンロードし、インストールして設定するダウンロードアドレス: htt...
この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...
この記事では、パーセンテージバーを実現するためのVueの具体的なコードを参考までに共有します。具体的...
CentosでのMySQLのインストールについては、以前の記事を参照してください。 Centos7....
しばらく前にシステムを再インストールしましたが、バックアップを取っていなかったので、コンピューター上...