タブ切り替え効果を実現するJavaScript

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

メインインターフェースを構築する

HTMLコード

<h1>タブ切り替え効果を実現する</h1>
<ul id="タブ">
    <li><a href="">映画とテレビ</a></li>
    <li><a href="">エンターテインメント</a></li>
    <li><a href="">テレビシリーズ</a></li>
</ul>
<div id="コンテンツ">
    <div id="content1">最新の映画おすすめ:<br>「ワイルド・スピード」<br>「ベイマックス」</div>
    <div id="content2">ホットなエンターテイメントのおすすめ:<br>「ランニングマン」<br>「The Voice of China」</div>
    <div id="content3">人気のテレビシリーズのおすすめ:<br>「Three Lives, Three Worlds」<br>「Our Times」</div>
</div>

CSSファイルの記述

新しい CSS ファイルを作成し、以前に記述した HTML インターフェイスをレンダリングするための CSS コードを記述します。

HTML ファイルに CSS ファイルをインポートすることを忘れないでください。

<link rel="スタイルシート" href="mCSS.css" >

CSSファイルコード

*{
    マージン: 0;
    パディング: 0;
}
 
#タブ{
    オーバーフロー: 非表示;
}
 
#タブli {
    フロート: 左;
    リストスタイル: なし;
    幅: 80ピクセル;
    高さ: 40px;
    テキスト配置: 中央;
}
 
#タブ li:first-child、#content1 {
    背景: #ffcc00;
}
 
#タブ li:最初の子 + li、#コンテンツ2 {
    背景: #ff00cc;
}
 
#タブ li:最後の子、#コンテンツ3 {
    背景: #00ccff;
}
 
#タブli a {
    行の高さ: 40px;
    色: 白;
    テキスト装飾: なし;
}
 
＃コンテンツ {
    位置: 相対的;
}
 
#コンテンツ1、#コンテンツ2、#コンテンツ3 {
    幅: 300ピクセル;
    高さ: 100px;
    位置: 絶対;
    上: 0;
    左: 0;
    パディング: 30px;
    表示: なし;
}
 
#コンテンツ1{
    表示: ブロック;
}

切り替え効果を実現するためのJavaScriptスクリプトファイルを作成する

JavaScript コード

// 特定のラベルをクリックすると、対応する div が表示され、その他は非表示になります。
// イベントをトリガーした要素を検索します var as = document.querySelectorAll("#tab a");
// イベント処理関数をバインドする for (var i = 0; i < as.length; i++) {
    as[i].onclick = 関数（）{
        // すべてのdivを非表示にする
        var divs = document.querySelectorAll("#content>div");
        (var i = 0; i < divs.length; i++) の場合 {
            divs[i].style.display = "なし";
        }
        // 対応するdivを表示させる // 現在のaのhrefを取得する
        var i = this.href.lastIndexOf("#");
        var id = this.href.slice(i);
        コンソール.log(id)
        document.querySelector(id).style.display = "ブロック";
    }
 
}

完全なケースコード

htmlファイル

<link rel="スタイルシート" href="mCSS.css" >
 
<h1>タブ切り替え効果を実現する</h1>
<ul id="タブ">
    <li><a href="#content1" >映画とテレビ</a></li>
    <li><a href="#content2" >エンターテイメント</a></li>
    <li><a href="#content3" >テレビシリーズ</a></li>
</ul>
<div id="コンテンツ">
    <div id="content1">最新の映画おすすめ:<br>「ワイルド・スピード」<br>「ベイマックス」</div>
    <div id="content2">ホットなエンターテイメントのおすすめ:<br>「ランニングマン」<br>「The Voice of China」</div>
    <div id="content3">人気のテレビシリーズのおすすめ:<br>「Three Lives, Three Worlds」<br>「Our Times」</div>
</div>
 
 
<script src="mJS.js"></script>

css の書式

*{
    マージン: 0;
    パディング: 0;
}
 
#タブ{
    オーバーフロー: 非表示;
}
 
#タブli {
    フロート: 左;
    リストスタイル: なし;
    幅: 80ピクセル;
    高さ: 40px;
    テキスト配置: 中央;
}
 
#タブ li:first-child、#content1 {
    背景: #ffcc00;
}
 
#タブ li:最初の子 + li、#コンテンツ2 {
    背景: #ff00cc;
}
 
#タブ li:最後の子、#コンテンツ3 {
    背景: #00ccff;
}
 
#タブli a {
    表示: ブロック;
    幅: 100%;
    高さ: 100%;
    行の高さ: 40px;
    色: 白;
    テキスト装飾: なし;
}
 
＃コンテンツ {
    位置: 相対的;
}
 
#コンテンツ1、#コンテンツ2、#コンテンツ3 {
    幅: 300ピクセル;
    高さ: 100px;
    位置: 絶対;
    上: 0;
    左: 0;
    パディング: 30px;
    表示: なし;
}
 
#コンテンツ1{
    表示: ブロック;
}

js の

// 特定のラベルをクリックすると、対応する div が表示され、その他は非表示になります。
// イベントをトリガーした要素を検索します var as = document.querySelectorAll("#tab a");
// イベント処理関数をバインドする for (var i = 0; i < as.length; i++) {
    as[i].onclick = 関数（）{
        // すべてのdivを非表示にする
        var divs = document.querySelectorAll("#content>div");
        (var i = 0; i < divs.length; i++) の場合 {
            divs[i].style.display = "なし";
        }
        // 対応するdivを表示させる // 現在のaのhrefを取得する
        var i = this.href.lastIndexOf("#");
        var id = this.href.slice(i);
        コンソールログ(ID)
        document.querySelector(id).style.display = "ブロック";
    }
 
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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