シンプルなタブバー切り替えケースを実現するJavaScript

シンプルなタブバー切り替えケースを実現するJavaScript

この記事では、タブバーの切り替え効果を簡単に実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

1. タブバー - ケース1

タブバー分析

liでの分析

jsを使用して非表示と表示を実現する

排他的な考え方:

1) すべての要素のすべてのスタイルをクリアする(他のスタイルは削除する)
2) 現在の要素のスタイルを設定します(お任せください)
3) 順序を逆にすることはできないので注意してください。まず他の人を殺し、それから自分を攻撃します。

私の考え:

コード実装:

<!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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript でタブバーの切り替え効果を実装する
  • シンプルなタブバー切り替えコンテンツバーを実装するJavaScript
  • JavaScript TABバー切り替え効果の例
  • タブバーの切り替え効果を実現する js
  • タブバーの切り替え効果を実現する JavaScript
  • js タブバー切り替えコード例の分析
  • タブバーの切り替え効果を実現するJavaScript

<<:  MySQLはOracleシーケンスに似たソリューションを実装しています

>>:  Docker デプロイメント Springboot プロジェクト例の分析

推薦する

Nginx Rewrite の使用シナリオとコード例の詳細な説明

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....

バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発

目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...

JavaScript オブジェクト指向クラス継承ケースの説明

1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...

Centos7 での mysql 8.0.15 のインストールと設定

この記事では、参考までにMySQL 8.0.15のインストールと設定のグラフィックチュートリアルを紹...

MySQL Innodb ストレージ構造と Null 値の保存の詳細な説明

背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...

CSS 疑似クラス: 空っぽだと光る (サンプルコード)

最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...

Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript

目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...

Vue-Routerのインストールと使用方法の詳細な説明

目次インストールルーティングの基本構成Vue にルーターをインストールするルーターの設定Router...

Uniapp は DingTalk スキャンコード ログイン サンプル コードを実装します

UniappにはDingTalk認証ログインがないため、この記事ではDingTalk QRコードログ...

CentOS での Django プロジェクトのデプロイに関する詳細なチュートリアル

基本環境パゴダ設置サービスパゴダにインストールされた[Pythonプロジェクトマネージャー]パゴダに...

フローティングをクリアするいくつかの方法(推奨)

1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...

Word のコンテンツを Web サイトのエディターに直接コピーすることはお勧めしません。

<br />質問: Word のコンテンツを Web サイトのエディターに直接コピーする...

ネイティブJSが様々なスポーツの均一な動きを実現

この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...

MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説

序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...

Nginx プロキシ axios リクエストと注意事項

序文最近、小さなデモを作成しました。大規模な工場のオンライン データを使用したため、インターフェイス...