この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有しています。具体的な内容は次のとおりです。 実際のアプリケーションでは、要素をクリックしたり移動したりしてドロップダウン メニューやページをポップアップ表示することは、Web デザインでよく使われる操作です。 次に、メニューをクリックしてメニューを切り替える機能を実装し、js を使用してこの機能を実装する 3 つの方法を提供します。 1. HTMLを使用して基本構造を設計する <本文> <h2>マルチタブクリックスイッチ</h2> <ul id="タブ"> <li id="tab1" value="1">10元セット</li> <li id="tab2" value="2">30元セット</li> <li id="tab3" value="3">月額50元</li> </ul> <div id="コンテナ"> <div id="content1"> 10 元パッケージの詳細: <br/> 月額パッケージ内での通話は 100 分、超過分は 0.2 元/分</div> <div id="content2" スタイル="display: none"> 30 元パッケージの詳細: <br/> 月間パッケージ内で 300 分の通話、超過分は 1.5 元/分</div> <div id="content3" スタイル="display: none"> 月額 50 元のパッケージの詳細: <br/> 月間通話無制限</div> </div> </本文> 2. CSSを使用して基本的なスタイルをデザインする <スタイル> * { マージン: 0; パディング: 0; } #タブli { フロート: 左; リストスタイル: なし; 幅: 80ピクセル; 高さ: 40px; 行の高さ: 40px; カーソル: ポインタ; テキスト配置: 中央; } #容器 { 位置: 相対的; } #コンテンツ1、#コンテンツ2、#コンテンツ3 { 幅: 300ピクセル; 高さ: 100px; パディング: 30px; 位置: 絶対; 上: 40px; 左: 0; } #タブ1、#コンテンツ1 { 背景色: #ffcc00; } #タブ2、#コンテンツ2 { 背景色: #ff00cc; } #タブ3、#コンテンツ3 { 背景色: #00ccff; } </スタイル> 3.jsはクリック切り替え機能を実装します //ネイティブjs var コンテナ = document.querySelectorAll('#container>div') var event_li = document.querySelectorAll('#tab>li') var 現在のインデックス = 0 for(var i=0;i<event_li.length;i++){ イベント_li[i].num=i event_li[i].onclick=関数(){ コンテナ[現在のインデックス].style.display='なし' var index_other = this.num コンテナ[index_other].style.display='ブロック' 現在のインデックス=インデックス_その他 }} //jQuery 実装では、親要素をクリックすると、すべての子要素が display_none になり、クリック イベントのある要素の子要素が display_block に設定されます。 var $container = $('#container>div') $('#tab>li').click(function(){ $container.css('表示', 'なし') var インデックス = $(this).index() var index_other = $(this).val()-1 $container[index_other].style.display = 'ブロック' }) //jQuery 実装では、親要素をクリックすると、最初の要素の子要素は display_none になり、クリック イベントのある要素の子要素は display_block に設定されます。 現在のインデックス=0 $('#tab>li').click(function(){ $($container[currentindex]).css('display', 'none') var インデックス = $(this).index() $container[index].style.display = 'ブロック' 現在のインデックス=インデックス }) 4. まとめ (1) ネイティブjsでもクリックして切り替える機能は実現できますが、jQueryを使う方が簡単です。構文はシンプルですが、機能は強力です。 (2)方法2と3を比較すると、方法2ではクリックイベントをトリガーした後、すべての子要素の表示モードをnoneに設定していることがわかります。明らかに、子要素の数が多い場合は、必要な変更の数もそれに応じて増加し、必然的に読み込みパフォーマンスに影響を与えます。したがって、方法3に最適化する必要があります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル
この記事では、MySQL で 2 つのテーブルを関連付ける結合テーブルにインデックスを作成する方法を...
しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築...
Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...
フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ち...
最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...
目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...
まず、コンテナが稼働している必要がありますコンテナのCONTAINER IDは、sudo docke...
まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...
この記事では、カードフリップ効果を実現するためのVueの具体的なコードを例として紹介します。具体的な...
Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...
状況は以下のとおりです: (PS: 赤いボックスは iframe 領域を表し、灰色の四角形は上記の ...
この記事では、時間範囲効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...
目次JSON.パースJSON.parse 構文リバイバーパラメータJSON.parse の機能その他...
序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...
ビッグデータはますます注目を集めており、ビッグデータのいくつかの構成要素に精通していないと、自慢でき...