Pure JS // 当另一个 divs class 被改变时隐藏 div

Question

注意：我不能使用 jQuery，只能使用原版 javascript

我对纯 JS 不是很流利。而这次我不能使用任何外部资源（比如 jquery）。

我需要的：

If div1 class is active, hide text2

If div2 class is active, hide text1

我以某种方式让它工作，但是当 class 使用另一个 javascript 代码动态更改时，我的 JS 不会触发。

触发活动的代码class

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

当 class 改变时应该触发 hide/show 的代码

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 demo

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>

Pure JS // 当另一个 divs class 被改变时隐藏 div

Pure JS // Hide div when another divs class has been changed

javascript

triggers

show-hide

Updated Codepen