この記事では、Web ページにタブを実装するための JS ステートメントの使用法 (2 つの方法) を主に紹介します。これは非常に優れており、必要な友人は参照できます。
タブは Web ページでよく使用されます。率直に言って、オプションをクリックすると、このオプションの内容が下にポップアップ表示されます。
方法 1:
方法 1 は簡単なコードを使用して実装できます。以下はすべてのコードです。
选项卡
まず、HTML 部分で Web ページのタブのコンテンツを定義します。
CSS 部分は HTML のコンテンツを変更します:
最後は最も重要な JS 部分です:
JS ステートメントの最初の for ループは、すべてのタブのクリックされた部分を取得することです。以下のイベント関数では I 変数にアクセスできません。i 変数は、クリックされるたびに oli.length 値にループします。したがって、i の値はカスタム要素属性に与えられ、以下で使用するためにループ内で i の値が保存されます。つまり、 oli[i]._index=i;
click 関数を追加した後の 2 番目の for ループでは、すべての oli の className を "empty" に変更し、すべての ops のスタイルを display='none'; に変更します。ループが終了したら、現在クリックされている oli に className を追加し、以下の対応する op スタイルを display='block'; として追加します。
以下は操作の結果です:
プログラムを書くときは必ず注意してください。タブ内の部分は次のとおりです。 li の数 (JS では oli.length) は、プログラムを作成したときに、以下の内容として ID を持つ p に含まれる p の数と同じである必要があります。 oli.length と op.length が異なるため、プログラムはエラーを報告しますが、要するに、エラーは長時間検出されないため、さらに注意が必要です。
方法 2:
方法 1 はタブが比較的少ない状況に適していますが、タブのコンテンツが多い場合はこの方法を使用する必要があります。先生の言ったことに 2 番目の方法を適用します。今週の JS の重要な知識: 自己実行関数
(function a(){ //函数里的内容 })(参数);
関数を定義するa(); 関数全体に括弧を追加し、次の括弧は入力パラメータです
以下は方法 2 のプログラムです。実行関数:
多个tab选项卡
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容2
内容3
方法 1 と同様に、まず HTML でコンテンツを記述し、CSS 部分で HTML を変更します。
イベントと自己実行関数を追加して複数のタブを完成させます。
以上がJavascript は Web ページにタブを実装します (2 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
