純JS // //更改另一個divs類時隱藏div

Question

注意：我不能使用jQuery，只能使用普通javascript

我不太會說純JS。 這次我不能使用任何外部資源（如jquery）。

---

我需要的：

如果div1類處於活動狀態，則隱藏text2

如果div2類處於活動狀態，則隱藏text1

我以某種方式使其工作，但是當類使用另一個JavaScript代碼動態更改時，我的JS不會觸發。

觸發活動類的代碼

function activeClass(elem) {
  var a = document.getElementsByClassName('item')
  for (i = 0; i < a.length; i++) {
    a[i].classList.remove('active')
  }
  elem.classList.add('active');
}

類更改時應觸發隱藏/顯示的代碼

if (document.querySelector(".text2").classList.contains("active")) {
  document.getElementsByClassName('text1s')[0].style.visibility = 'hidden';
  document.getElementsByClassName('text2s')[0].style.visibility = 'visible';
}

if (document.querySelector(".text1").classList.contains("active")) {
  document.getElementsByClassName('text2s')[0].style.visibility = 'hidden';
  document.getElementsByClassName('text1s')[0].style.visibility = 'visible';
}

我做錯了什么？

---

Codepen示范

Answer 1

• 將您的條件放入點擊處理程序中。
• inactive元素添加內聯visibility樣式

 function activeClass(elem) { var a = document.getElementsByClassName('item') for (i = 0; i < a.length; i++) { a[i].classList.remove('active') } elem.classList.add('active'); if (document.querySelector(".text2").classList.contains("active")) { document.getElementsByClassName('text1s')[0].style.visibility = 'hidden'; document.getElementsByClassName('text2s')[0].style.visibility = 'visible'; } if (document.querySelector(".text1").classList.contains("active")) { document.getElementsByClassName('text2s')[0].style.visibility = 'hidden'; document.getElementsByClassName('text1s')[0].style.visibility = 'visible'; } } 

 body { margin: 3em; } .item { cursor: pointer; } a { padding: 10px; } .active { color: red; border: 1px solid red; } 

 <a class="item text1" onclick="activeClass(this)">show text</a> <a class="item text2 active" onclick="activeClass(this)">hide text</a> <br> <br> <h1 class="text1s" style='visibility:hidden;'>TEXT 1</h1> <h1 class="text2s">TEXT 2</h1> 

更新的Codepen