完全に分離された構造/プレゼンテーション/動作を持つタブ (jquery バージョンとネイティブ JS バージョン)_jquery

考え方としては通常のタブと同様で、オプションメニューをクリックしてハイライト表示し、主にインデックス位置を判断してオプションエリアを表示します。メニューリストのメニューをクリックすると、ネイティブjsにも多くの実装方法があります(青い理想で検索してください)。この記事の例では、jQバージョンのアイデアと一致するように、ループ判定を使用しています。
その他の手順:
1. この記事のデモを通して、ネイティブ JS の window.onload=function(){…} と jQuery の $(document).ready( の違いを明確に確認できます。 function(){…}); これが、初期状態を定義するためにスタイルを使用しない理由です。この記事は、
2 のプロトタイプ実装にすぎません。タブを同じページ上の複数のタブで使用する場合、変数は関数ヘッダーに集中しており、それ自体を関数にカプセル化できます。もっと素晴らしいエフェクトを追加することは自分で考えてください
4. このエフェクトを使用するときは、単に機械的にコピーして貼り付けるだけでなく、よく考えて実践し、それを自分のものに消化してください。 >デモを見る:

<meta charset="gb2312"> <meta name="author" content="Mr.Think">