Question

我想知道单击一个元素时是否有更有效的方法来更改多个元素的CSS。

我有工作代码，通过单击“关于”部分中的子标题，可以更改其颜色，其他子标题的颜色以及到达相应段落的不透明度。对我来说，它看起来像很多代码。我想象有一种更简单或更简化的方法来完成这些事情，而这些只是我的中级JS技能所不知道的。

const about = () => {
  const paraOne = document.getElementById("para-one");
  const paraTwo = document.getElementById("para-two");
  const paraThree = document.getElementById("para-three");
  const mission = document.querySelector(".mission");
  const value = document.querySelector(".value");
  const vision = document.querySelector(".vision");
  mission.addEventListener('click', () => {
    mission.classList.add("active");
    value.classList.remove("active");
    vision.classList.remove("active");
    paraOne.classList.remove('zero');
    paraTwo.classList.add('zero');
    paraThree.classList.add('zero');
  });
  value.addEventListener('click', () => {
    value.classList.add("active");
    mission.classList.remove("active");
    vision.classList.remove("active");
    paraOne.classList.add('zero');
    paraTwo.classList.remove('zero');
    paraThree.classList.add('zero');
  });
  vision.addEventListener('click', () => {
    vision.classList.add("active");
    mission.classList.remove("active");
    value.classList.remove("active");
    paraOne.classList.add('zero');
    paraTwo.classList.add('zero');
    paraThree.classList.remove('zero');
  });
}

about();

#about-center ul li:hover,
#about-center ul li.active {
  color: black;
  cursor: pointer;
}

.active {
  color: black;
  cursor: pointer;
}

#container {
  position: relative;
}

#container p {
  position: absolute;
  left: 30%;
}

.zero {
  opacity: 0;
}

#about ul,
#about p,
#about button {
  margin-bottom: 2em;
}

#about-center p {
  font-size: 2rem;
}

<div id="about-center">
  <h1>About Us</h1>
  <ul>
    <li class="mission active">OUR MISSION</li>
    <li class="value">our values</li>
    <li class="vision">our vision</li>
  </ul>
  <div id="container">
    <p id="para-one">This is our mission.
    </p>
    <p id="para-two" class="zero">These are our values.
    </p>
    <p id="para-three" class="zero">This is our vision.
    </p>
  </div>
  <button>read more</button>
</div>

Answer 1

我认为这是可能的。现在，可以做一些事情使它更具可读性（尤其是如果以后您获得三个以上的标签），但这不会改变效果或实际上会使效果更糟。

类似于...制作使所有选项卡“关闭”并从所有单击处理程序中调用的函数将更易读，尽管从技术上讲，这意味着将不必要地删除未在其中之一上设置的类。

此外，如果将匹配的段落ID放入HTML，则只能对所有函数使用一个函数，并使用event.currentTarget来识别调用了哪个函数。同样，如果只有三个选项卡，那不值得花时间，但是如果您有更多选项卡……

Answer 2

您可以遍历所有li元素。使用此命令最初添加事件侦听器。然后，在侦听器中，您可以再次循环以对用户单击的元素和其他元素进行适当的类更改。而且，您可以使用迭代索引来更改相应的p元素的类。

const about = () => {
  const lis = document.querySelectorAll("#about-list li");
  const paras = document.querySelectorAll("#container p");
  lis.forEach(li => li.addEventListener("click", (e) => lis.forEach((li1, index) => {
    if (li1 == e.target) {
      li1.classList.add("active");
      paras[index].classList.remove("zero");
    } else {
      li1.classList.remove("active");
      paras[index].classList.add("zero");
    }
  })));
}

about();

#about-center ul li:hover,
#about-center ul li.active {
  color: black;
  cursor: pointer;
}

.active {
  color: black;
  cursor: pointer;
}

#about-center ul li {
  color: grey;
}

#container {
  position: relative;
}

#container p {
  position: absolute;
  left: 30%;
}

.zero {
  opacity: 0;
}

#about ul,
#about p,
#about button {
  margin-bottom: 2em;
}

#about-center p {
  font-size: 2rem;
}

<div id="about-center">
  <h1>About Us</h1>
  <ul id="about-list">
    <li class="mission active">OUR MISSION</li>
    <li class="value">our values</li>
    <li class="vision">our vision</li>
  </ul>
  <div id="container">
    <p id="para-one">This is our mission.
    </p>
    <p id="para-two" class="zero">These are our values.
    </p>
    <p id="para-three" class="zero">This is our vision.
    </p>
  </div>
  <button>read more</button>
</div>

单击后，我的代码是否可以更改元素的CSS？

2 个答案: