Question

注意：我不能使用jQuery，只能使用vanilla 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 demo

Answer 1

将您的条件置于点击处理程序中。
为visibility元素

inactive

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类被更改时隐藏div

1 个答案:

Updated Codepen