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>

它应该看起来像这样

标签： htmlcssbuttonhyperlinktimeline

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>