シンプルなタブバー切り替えコンテンツバーを実装する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 インストールチュートリアル

推薦する

入力[type=file]の起動が遅くて動かなくなる問題を素早く解決します

入力タグタイプがファイルで、タグ内にaccpet="image/*"属性が設定さ...

MySQL スロークエリ関連パラメータの原理の分析

MySQL スロー クエリ (正式名称はスロー クエリ ログ) は、MySQL によって提供されるロ...

マウスを動かしたときにセカンダリメニューバーを実装するために HTML+CSS を使用する例

この記事では、マウスを動かしたときにセカンダリ メニュー バーを実装するために HTML+CSS を...

Linuxでのaliasコマンドの使い方の詳細な説明

1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...

Linux で MySQL のスケジュールバックアップを実装する方法

実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...

mysql ERROR 1045 (28000) 問題の解決方法

私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...

VMware 15.5 に CentOS7 をインストールするためのグラフィック チュートリアル

1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...

Nodejs モジュール システムのソースコード分析

目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...

Nginx 構成の実装 HTTPS セキュリティ認証

1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...

SQL 面接の質問: 時間差の合計を求める (重複は無視)

ある会社の BI 職の面接を受けたとき、面接で SQL に関する質問がありました。一見すると非常に簡...

CSS 極座標のサンプルコード

序文このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の...

配列をフィルタリングするJavaScript

この記事では、配列フィルタリングを実装するためのJavaScriptの具体的なコードを参考までに紹介...

クラウド CentOS で Docker リモート サービス リンクを有効にするための実装手順

ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...

メタタグコードを使用して、360 デュアルコアブラウザを互換モードではなく高速モードにデフォルト設定します。

あるウェブサイトでは、ユーザーが WebKit カーネルでページを開くことを期待して、HTML5 と...

MySQL における「:=」と「=」の違いの簡単な分析

=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の場合は等号の効果があ...