シンプルなタブバー切り替えコンテンツバーを実装するJavaScript

シンプルなタブバー切り替えコンテンツバーを実装するJavaScript

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

HTML+CSS部分

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        /* デフォルトのマージンがあるため、CSS を初期化します*{ margin:0; padding:0;}

h1、h2、h3、h4、h5、h6{フォントサイズ:100%; フォントの太さ:通常;}

ol,ul{ リストスタイル:なし;}

img,fieldset{ border:0 none; display:block;} */
        div、ul、li{
            ボックスのサイズ: 境界線ボックス;
            マージン: 0;
            パディング: 0;
        }
        ul{
            リストスタイルタイプ: なし;
        }
        {
            テキスト装飾: なし;
        }
        #nav{
            幅: 450ピクセル;
            高さ: 400px;
            margin: 100px auto;/*左右中央*/
            背景色: ピンク;
            パディング: 0;
            フォントサイズ: 14px;
        }
        
        li{
            フロート: 左;
            幅: 150ピクセル;
            高さ: 30px;
            テキスト配置: 中央;
            行の高さ: 0.6rem;
            境界線: 0.02rem 実線 #ccc;
        }
        。コンテンツ{
            クリア: 両方;
            位置: 相対的;
        }
        .コンテンツdiv{
            幅: 450ピクセル;
            高さ: 370ピクセル;
            位置: 絶対;
            表示: なし;
        }
        .tab .choose{
            背景色: スカイブルー;
        }
        .コンテンツ .現在{
            表示: ブロック;
        }
    </スタイル>
    <script src="jQuery.mini.js"></script>
   
</head>
<本文>
    <div id="nav">
        <div class="tab">
            <ul>
                <li class="choose" ><a href="#" > 1</a></li>
                <li><a href="#" >2</a></li>
                <li><a href="#" >3</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="current">1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
    </本文>
</html>

ネイティブ js コード

var lis = document.querySelectorAll('li');
var divs = document.querySelector('.content').querySelectorAll('div');
  for(var i=0; i<lis.length; i++){
            lis[i].setAttribute('dateIndex',i);//後でコンテンツバーをロックしやすくするために各liのインデックスを設定します lis[i].addEventListener('click',function(){
                for(var j=0; j<lis.length; j++){
                    lis[j].className = ''; //すべてのliのスタイルを空に設定する}
                this.className = 'choose'; //現在クリックされているliのスタイルを設定する(排他的)
                var index = this.getAttribute('dateIndex'); //現在のliのインデックスを取得します
                // コンソール.log(インデックス);
                for(var j=0; j<lis.length; j++){
                   divs[j].className = '';//排他的// lis[i].className = 'choose';
                }
                divs[index].className = 'current';
          })
        }
## jQuery メソッド ```javascript
// jQuery メソッド $(function(){
            $("li").click(function(){
                $(this).addClass("choose"); //現在クリックされているliにスタイルを追加します $(this).siblings("li").removeClass("choose"); //兄弟要素からスタイルを削除します(排他的)
                var index = $(this).index(); //現在クリックされているliのインデックスを取得します
                $(".content div").eq(index).show().siblings("div").hide();
                // 対応するコンテンツボックスをインデックスで取得し、show() で表示し、兄弟要素を選択して非表示にします。分解 ======》
                //$(".content div").eq(index).show();
                // $(".content div").eq(index).siblings("div").hide()
            })
        }) 

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

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

<<:  ドメイン名を指定されたポートに転送するようにNginxを設定する方法

>>:  RHEL7.5 mysql 8.0.11 インストールチュートリアル

推薦する

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...

中国の専門ではない:文化の違いの中でのウェブ開発

Web デザインと開発は大変な作業なので、少数の人だけを対象に設計しないでください。これは外国人が...

MySQL の null と not null、null と空の値の違いの詳細な説明 ''''

MySQL を長い間使用してきた多くの人は、これら 2 つのフィールド属性の概念をまだよく理解して...

Apache Webサーバーのインストールと設定方法

信頼性が高く、人気があり、簡単に構成できる Web サーバーである Apache で独自の Web ...

MySQL データをエクスポートする際の secure-file-priv 問題の解決方法

エラー 1290 (HY000) : MySQL サーバーは –secure-file-priv オ...

Navicat PremiumでSQLファイルをインポートする方法

今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...

MySQLの結合クエリ、ユニオンクエリ、サブクエリの原理と使用例の詳細な説明

この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...

ES6 の Set および WeakSet コレクションの詳細な説明

目次セットは値が重複しない特別なコレクションです。セットコレクション基本API独自の価値判断セットを...

React onClickにパラメータを渡す問題について話しましょう

背景下のようなリストでは、削除ボタンをクリックすると削除操作を実行する必要があります。 リスト生成:...

フォント名に従ってフォントを呼び出すと、ブラウザに必要なフォントが表示されます。

質問 1: ブラウザに必要なフォントを表示するように指示するにはどうすればよいでしょうか? フォント...

mysql 解凍パッケージの基本インストールチュートリアル

新しいコンピューターに変更したので、すべての環境を新しいコンピューター上で設定する必要があります。ふ...

MySQL における varchar 型と char 型の違い

目次前述のVARCHAR型VARCHAR適用可能な状況CHAR型テストVARCHAR(5)とVARC...

MYSQL ロック解除とロックテーブルの紹介

MySQL ロックの概要他のデータベースと比較すると、MySQL のロック メカニズムは比較的単純で...

nginx ssl を設定して https アクセスを実装する手順 (初心者向け)

序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...

js を使用して XML オンライン エディターを作成する例

目次序文オンラインXMLエディタの必要性テクノロジー事前調査ビジュアルプログラミングVSCODEプラ...