ホームページ >ウェブフロントエンド >jsチュートリアル >完全に分離された構造/プレゼンテーション/動作を持つタブ (jquery バージョンとネイティブ JS バージョン)_jquery
完全に分離された構造/プレゼンテーション/動作を持つタブ (jquery バージョンとネイティブ JS バージョン)_jquery
- WBOYオリジナル
- 2016-05-16 18:21:191058ブラウズ
考え方としては通常のタブと同様で、オプションメニューをクリックしてハイライト表示し、主にインデックス位置を判断してオプションエリアを表示します。メニューリストのメニューをクリックすると、ネイティブjsにも多くの実装方法があります(青い理想で検索してください)。この記事の例では、jQバージョンのアイデアと一致するように、ループ判定を使用しています。
その他の手順:
1. この記事のデモを通して、ネイティブ JS の window.onload=function(){…} と jQuery の $(document).ready( の違いを明確に確認できます。 function(){…}); これが、初期状態を定義するためにスタイルを使用しない理由です。この記事は、
2 のプロトタイプ実装にすぎません。タブを同じページ上の複数のタブで使用する場合、変数は関数ヘッダーに集中しており、それ自体を関数にカプセル化できます。もっと素晴らしいエフェクトを追加することは自分で考えてください
4. このエフェクトを使用するときは、単に機械的にコピーして貼り付けるだけでなく、よく考えて実践し、それを自分のものに消化してください。 >デモを見る:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。