jsはクリックしてカードを切り替える機能を実現します

jsはクリックしてカードを切り替える機能を実現します

この記事の例では、クリックしてカードを切り替える機能を実現するための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/>&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タグインスタンスを実装します
  • Vue.js トグルボタンをクリックして例の内容を変更します
  • クリックスイッチTABタグの例を実現するシンプルな純粋なjs
  • JSで実装したシンプルなタブクリック切り替え機能の例
  • ネイティブJSは画像の非表示と表示を実現し、JSは画像のクリックと切り替えを実現します
  • jQuery プラグイン jquery.LightBox.js は、クリックして画像を拡大したり、左クリックと右クリックを切り替える効果を実現します (デモ ソース コードのダウンロードあり)
  • チェックボックスをクリックして背景画像を切り替えるための js を使用した簡単な例
  • JavaScript で実装したシンプルなタブクリック切り替え機能の例
  • JavaScript でタブクリック切り替えのサンプルコードを実装する
  • JSは、水色のシンプルな垂直タブクリック切り替え効果を実現します

<<:  Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

>>:  MySQLにおける正規表現の一般的な使用法

推薦する

MySQL の結合テーブルにインデックスを作成する方法

この記事では、MySQL で 2 つのテーブルを関連付ける結合テーブルにインデックスを作成する方法を...

Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細な説明

しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築...

NginxはURLのパスに応じてアップストリームに動的に転送します

Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...

簡単な手順で純粋な CSS3 で 3D 反転効果を実現

フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ち...

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...

Dockerコンテナでルート権限を取得する方法

まず、コンテナが稼働している必要がありますコンテナのCONTAINER IDは、sudo docke...

Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...

Vueはカードフリップ効果を実現します

この記事では、カードフリップ効果を実現するためのVueの具体的なコードを例として紹介します。具体的な...

JavaScriptにおけるこれの深い理解

Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...

IE6 の iframe の水平スクロール バーの解決策

状況は以下のとおりです: (PS: 赤いボックスは iframe 領域を表し、灰色の四角形は上記の ...

時間範囲効果を実現するためのJavaScript

この記事では、時間範囲効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...

JSON.parse と JSON.stringify の使い方の詳細な説明

目次JSON.パースJSON.parse 構文リバイバーパラメータJSON.parse の機能その他...

効率的なMySQLページングの詳細な説明

序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...

Hadoop を使用せずに Linux 環境に Spark のスタンドアロン バージョンをインストールする方法

ビッグデータはますます注目を集めており、ビッグデータのいくつかの構成要素に精通していないと、自慢でき...