Comment JavaScript peut-il être utilisé pour basculer la visibilité de plusieurs éléments Div sur une page Web ?

Afficher et masquer un élément à l'aide de JavaScript

Dans le développement Web, l'affichage ou le masquage dynamique d'éléments sur une page Web peut améliorer considérablement la interface utilisateur. Cet article se concentre sur la manipulation de la visibilité des éléments div à l'aide de JavaScript, vous fournissant des méthodes fiables pour contrôler l'apparence et le comportement de votre page Web.

Notre objectif est de comprendre comment activer/désactiver la visibilité de deux div sur un page Web à l’aide de boutons. Pendant que votre code initial réussit à basculer l'affichage d'un div, nous explorerons une solution complète pour basculer efficacement l'affichage des deux div.

Masquage et affichage d'un élément

La manipulation de la propriété de style d'un élément est cruciale pour contrôler sa visibilité. La propriété display s'avère être l'option la plus polyvalente pour gérer la façon dont un élément apparaît sur la page :

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

Alternativement, la modification de la propriété de visibilité garantit qu'un élément conserve son espace alloué même lorsqu'il est masqué :

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

Basculer la visibilité pour un groupe de Elements

Pour basculer la visibilité de plusieurs éléments, parcourez chaque élément et définissez leur propriété d'affichage sur none :

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

Cette fonction utilitaire accepte à la fois un seul élément ou un tableau d'éléments, garantissant la flexibilité de masquer un groupe d'éléments.

En utilisant ces méthodes, nous pouvons affiner votre code pour obtenir le résultat souhaité. fonctionnalité :

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;
});

Ce code révisé attribue les vues actives et masquées de manière dynamique en fonction des clics sur les boutons. En basculant entre les deux variables, nous basculons efficacement la visibilité des divs cibles et de remplacement.

En maîtrisant ces techniques JavaScript, vous pouvez contrôler de manière transparente la visibilité des éléments sur votre page Web, améliorant ainsi l'engagement des utilisateurs et l'ensemble de la visibilité. fonctionnalité de votre site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!