シンプルなタブバー切り替えケースを実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません: