JavaScript を使用して Web ページ上の複数の Div 要素の表示/非表示を切り替えるにはどうすればよいですか?

JavaScript を使用した要素の表示と非表示

Web 開発では、Web ページ上の要素を動的に表示または非表示にすることで、ユーザーインターフェース。この記事では、JavaScript を使用した div 要素の可視性の操作に焦点を当て、Web ページの外観と動作を制御するための信頼できる方法を提供します。

私たちの目標は、1 つのオブジェクト上で 2 つの div 要素の可視性を切り替える方法を理解することです。ボタンを使用した Web ページ。最初のコードでは 1 つの div の表示を正常に切り替えていますが、両方の div の表示を効果的に切り替えるための包括的なソリューションを検討します。

要素の非表示と表示

要素のスタイル プロパティの操作は、その可視性を制御するために重要です。表示プロパティは、ページ上での要素の表示方法を管理する上で最も汎用性の高いオプションであることがわかります:

element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show

また、可視性プロパティを変更すると、非表示の場合でも要素が割り当てられたスペースを確実に維持できます:

element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show

グループの表示/非表示を切り替える要素

複数の要素の表示/非表示を切り替えるには、各要素を反復処理し、その表示プロパティを none に設定します。

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

このユーティリティ関数は、単一の要素または要素の配列により、要素のグループを非表示にする際の柔軟性が確保されます。

これらのメソッドを利用すると、コードを改良して目的の結果を達成できます。機能:

function toggleView(active, hidden) {
  document.getElementById(active).style.display = 'block';
  document.getElementById(hidden).style.display = 'none';
}

// Usage:
const view1 = 'target';
const view2 = 'replace_target';

document.querySelector('button.toggle').addEventListener('click', () => {
  toggleView(activeView === view1 ? view2 : view1, activeView === view1 ? view1 : view2);
  activeView = activeView === view1 ? view2 : view1;
});

この改訂されたコードは、ボタンのクリックに基づいてアクティブなビューと非表示のビューを動的に割り当てます。 2 つの変数を切り替えることで、ターゲット div と置換 div の表示を効果的に切り替えます。

これらの JavaScript テクニックをマスターすることで、Web ページ上の要素の表示をシームレスに制御し、ユーザー エンゲージメントと全体的なパフォーマンスを向上させることができます。ウェブサイトの機能

以上がJavaScript を使用して Web ページ上の複数の Div 要素の表示/非表示を切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。