JavaScriptはクリックトグル機能を実装します

JavaScriptはクリックトグル機能を実装します

この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

実際のアプリケーションでは、要素をクリックしたり移動したりしてドロップダウン メニューやページをポップアップ表示することは、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/>&nbsp;月額パッケージ内での通話は 100 分、超過分は 0.2 元/分</div>
 <div id="content2" スタイル="display: none">
 30 元パッケージの詳細: <br/>&nbsp; 月間パッケージ内で 300 分の通話、超過分は 1.5 元/分</div>
 <div id="content3" スタイル="display: none">
 月額 50 元のパッケージの詳細: <br/>&nbsp;月間通話無制限</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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsはクリックして切り替えるTABタグインスタンスを実装します
  • クリックスイッチTABタグの例を実現するシンプルな純粋なjs
  • Vue.js トグルボタンをクリックして例の内容を変更します
  • JSで実装したシンプルなタブクリック切り替え機能の例
  • ネイティブJSは画像の非表示と表示を実現し、JSは画像のクリックと切り替えを実現します
  • jQuery プラグイン jquery.LightBox.js は、クリックして画像を拡大したり、左クリックと右クリックを切り替える効果を実現します (デモ ソース コードのダウンロードあり)
  • チェックボックスをクリックして背景画像を切り替えるための js を使用した簡単な例
  • JavaScript で実装したシンプルなタブクリック切り替え機能の例
  • JavaScript でタブクリック切り替えのサンプルコードを実装する
  • JSは、水色のシンプルな垂直タブクリック切り替え効果を実現します

<<:  EclipseにTomcatサーバー設定を追加する方法

>>:  Windows で MySQL サービスを停止または削除できない問題の解決策

推薦する

MySQLの一般的なメモリ不足による起動失敗に対する完璧な解決策

1. MySQLが正常に起動しない場合は、エラーログ/var/log/mysql/error.log...

MySQL操作テーブルでよく使われるSQLのまとめ

1. テーブル内のフィールドの種類を表示する テーブル名を記述する desc テーブル名 2. テー...

MySQL 8.0.21 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.21のインストールと設定方法を記録してみんなで共有します。 1. ダウンロード1...

HTML入力ドロップダウンメニューを実装する方法

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

MySQLデータベースの操作とメンテナンスのデータ復旧方法

これまでの 3 つの記事では、論理バックアップと物理バックアップを含む、MySQL データベースの一...

MySQL デッドロックのトラブルシューティングの全プロセス記録

【著者】 Liu Bo: Ctrip テクニカル サポート センターのシニア データベース マネージ...

Dockerを使用してDjango+MySQL8開発環境をデプロイする方法の詳細な説明

しばらく前にシステムを再インストールしましたが、バックアップを取っていなかったので、コンピューター上...

Windows CVE-2019-0708 リモート デスクトップ コード実行脆弱性の再現問題

1. 脆弱性の説明マイクロソフトは2019年5月15日、CVE番号CVE-2019-0708のWin...

Linux サービスでファイアウォールを有効にする 2 つの方法

方法は2つあります: 1. サービス方法ファイアウォールのステータスを確認します。 [root@ce...

Docker で Kong API Gateway をインストールして使用する詳細なチュートリアル

1 はじめにKong は単純な製品ではありません。この記事で言及されている Kong は主に Kon...

MySQL におけるユニーク制約と NULL の詳細な説明

序文説明を簡略化するために以前に設定した要件は、他のグループから MQ メッセージを受信し、データベ...

MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...

JavaScript の例におけるループの使用法の詳細な説明

退屈だったので、ループに関する簡単な演習をいくつかまとめてみました。JS を学び始めたばかりの方に役...

Linux の一般的な Java プログラム起動スクリプトのコード例

シェルを起動する頻度は非常に低いですが。 。 。しかし、書くたびに、多くの jar ファイル パスを...

MySql バッチ挿入の最適化 SQL 実行効率の例の詳細な説明

MySql バッチ挿入の最適化 SQL 実行効率の例の詳細な説明itemcontractprice ...