html - 编写此 onclick 背景更改的更简单方法 - HTML/CSS

Question

有没有办法简化这段代码？我只是觉得它对于一个简单的功能来说太长了。

我尝试使用 querySelectorAll()，但我很难重新编码。

请查看包含的代码段。

我试图寻找更简单的方法，不幸的是我找不到。

function myFunction() {
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");
if (moreText.style.display === "none") {
    moreText.style.display = "inline";
  document.getElementById("more2").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#000000";
  document.getElementById("myBtn2").style.backgroundColor = "#006668";
} else {
    moreText.style.display = "inline";
  document.getElementById("more2").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#000000";
  document.getElementById("myBtn2").style.backgroundColor = "#006668";
  } } 
  function myFunction2() {
  var moreText = document.getElementById("more2");
  var btnText = document.getElementById("myBtn2");
if (moreText.style.display === "none") {
    moreText.style.display = "inline";
  document.getElementById("more").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#006668";
  document.getElementById("myBtn2").style.backgroundColor = "#000000";
} else {
    moreText.style.display = "inline";
  document.getElementById("more").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#006668";
  document.getElementById("myBtn2").style.backgroundColor = "#000000";
  } } 
   function myFunction3() {
  var moreText = document.getElementById("more3");
  var btnText = document.getElementById("myBtn3");
if (moreText.style.display === "none") {
    moreText.style.display = "inline";
  document.getElementById("more").style.display = 'none';
  document.getElementById("more2").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#006668";
  document.getElementById("myBtn2").style.backgroundColor = "#006668";
} else {
   moreText.style.display = "inline";
  document.getElementById("more").style.display = 'none';
  document.getElementById("more2").style.display = 'none';
  document.getElementById("myBtn").style.backgroundColor = "#006668";
  document.getElementById("myBtn2").style.backgroundColor = "#006668";
  } } 

div.scrollmenu {
  background-color: #006668;
  overflow: auto;
  white-space: nowrap;
}
#more {display: none;}
#more2 {display: none;}

<div class="scrollmenu">
  <a onclick="myFunction()" id="myBtn" href="#Event1">Event 1</a>
  <a onclick="myFunction2()" id="myBtn2" href="#Event2">Event 2</a>
  </div>
  <span id="more">Display Event Here 1.</span>
<span id="more2">Display Event Here 2.</span>

It's supposed to look like this

Answer 1

在下面的更新示例中查看我的评论。

单击时，我们删除按钮和文本区域上的所有事件类，然后将事件类添加到需要它的类中。

这里的优点是您没有将事件类存储在 javascript 中。 这样你就不会冒让表示和存储状态与可能正在运行的其他脚本不同步的机会。

// first we get all the buttons and text areas
var btns = document.querySelectorAll('.btn');
var mores = document.querySelectorAll('.more');

// we add an event listener by looping trough all the buttons
for (const btn of btns) {
  btn.addEventListener('click', handleClick);
}

// handle the button click
function handleClick(event){
  event.preventDefault();
  
  // remove the active class on ALL the buttons
  for (const btn of btns) {
    btn.classList.remove('active');
  }
  // add the active class on the clicked button
  event.target.classList.add('active');
  
  //remove the active class on all the text areas
  for (const more of mores) {
    more.classList.remove('active');
  }
  // here we get the data-show attribute of the clicked element 
  // and use it to show the right text area
  document.querySelector(`#${event.target.dataset.show}`).classList.add('active'); 
}

div.scrollmenu {
  background-color: #006668;
  overflow: auto;
  white-space: nowrap;
}

.btn.active{
  background: #000000;
}

.more{
  display: none;
}

.more.active{
  display: block;
}

<div class="scrollmenu">
  <a class="btn" href="#" data-show="more1" >Event 1</a>
  <a class="btn" href="#" data-show="more2">Event 2</a>
</div>
<span id="more1" class="more">Display Event Here 1.</span>
<span id="more2" class="more">Display Event Here 2.</span>