Utilisation de JS pour basculer entre deux éléments HTML

Modifier Démarrer:

Je ne sais pas si je veux démarrer une autre question pour cela, mais j'aimerais savoir pourquoi déplacer la classe CSS .hide casse le code ci-dessous: P>

Merci, P >

EDIT END: P>

compris. P>

a dû ajouter un autre événement qui a écouté un clic sur la balise p>

. Le code est ci-dessous: p>

html: p> xxx pré>

CSS: p> xxx pré>

JS: p >

const switchElements = document.querySelectorAll('.switch');

for(const switchElement of switchElements) {
    switchElement.addEventListener('click', (e) => {

        e.target.classList.add('hide');
        e.target.nextSibling.classList.remove('hide');

    })
}

const backElements = document.querySelectorAll('.back');

for (const backs of backElements) {
    backs.addEventListener('click', (e) => {
        e.target.classList.add('hide');
        e.target.previousSibling.classList.remove('hide');
    })
}

Le problème est dans votre CSS. Le plus gros problème est que les parenthèses sont déséquilibrées, de sorte que la définition de .hide est manquée. La question secondaire est que les définitions imbriquées ne sont pas des CSS. Ils ressemblent à moins ou en sass.

OK, je ne dirais pas que ceci est une réponse légitime, car je ne résout pas cette question avec JS.

Mais la réalité est, il y a toujours plusieurs façons de résoudre (ou vous pouvez appeler cela un piratage) problème. P>

C'est l'approche que j'utilise plusieurs fois sur la production et ne nécessite pas une seule ligne de javascript. P>

Je ne réutilise pas votre code, mais écrivez Le mien pour le garder aussi simple que c'est aussi simple que c'est, mais l'idée est assez facile d'appliquer sur votre cas. p>

Si vous souhaitez les garder ouverts, la radio peut être modifiée en cas de cocher. P>

p>

<label for="radio1">
  <input type="radio" id="radio1" name="toggler">
  toggle 1
  <div>
    this is the first content
  </div>
</label>

<label for="radio2">
  <input type="radio" id="radio2" name="toggler">
  toggle 2
  <div>
    this is the second content
  </div>
</label>

<label for="radio3">
  <input type="radio" id="radio3" name="toggler">
  toggle 3
  <div>
    this is the third content
  </div>
</label>