javascript - 编写一个函数来更改 div 的 style.display 属性？

Question

我正在尝试编写一个执行以下代码而不重复自身的函数。我想根据您单击的选项卡制作显示内容的选项卡，如下所示:https://www.w3schools.com/howto/howto_js_tabs.asp但在 HTML 中没有 onClick。我可以切换按钮的类以向它们添加事件类，但我不知道如何更改 tabcontent 的 style.display 属性。第一段代码执行我想要的，但我知道有一个更清洁的解决方案。
如何让我的 openTab 函数做我想做的事？
有没有更好的方法将事件监听器添加到按钮？

document.getElementById("btn1").addEventListener("click", function() {
  document.getElementById("content1").className ="show";
  document.getElementById("content2").className ="tabcontent";
  document.getElementById("content3").className ="tabcontent";
});
document.getElementById("btn2").addEventListener("click", function() {
  document.getElementById("content1").className ="tabcontent";
  document.getElementById("content2").className ="show";
  document.getElementById("content3").className ="tabcontent";
});
document.getElementById("btn3").addEventListener("click", function() {
  document.getElementById("content1").className ="tabcontent";
  document.getElementById("content2").className ="tabcontent";
  document.getElementById("content3").className ="show";
});

function openTab(evt) {
    // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    console.log('first')
  }
      
  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Show the current tab, and add an "active" class to the button that opened the tab
 

  evt.currentTarget.className += " active";

 //this loop adds a style.display = "block" to every tabcontent class.
  for (i=0; tabcontent.length; i++) {
    tabcontent[i].style.display = "block";
  }
  //if I make the id's for all the divs "content" this line adds the style.display = "block" to 
    only the first tabcontent class

  //document.getElementById("content").style.display = "block";
  
  
}
document.getElementById("btn1").addEventListener("click", openTab);
document.getElementById("btn2").addEventListener("click", openTab);
document.getElementById("btn3").addEventListener("click", openTab);

<div class="tab-container">
  <button class="tablinks" id="btn1">Fit Guide</button>
  <button class="tablinks" id="btn2">Care</button>
  <button class="tablinks" id="btn3">Material</button>
</div>
<div id="content1" class="tabcontent">
  <p>Integer vel arcu ac dolor tincidunt dapibus..</p>
</div>
<div id="content2" class="tabcontent">
  <p>Integer vel arcu ac dolor tincidunt dapibus..</p>
</div>
<div id="content3" class="tabcontent">
  <p>Integer vel arcu ac dolor tincidunt dapibus..</p>
</div>

Answer 1

至于将事件监听器添加到类似元素的集合中的问题，确实有一种更简洁的方法。您可以通过类名获取所有元素，并在向每个元素添加事件监听器的同时迭代每个元素。这将如下所示:

const buttons = [...document.getElementsByClassName("tablinks")];

buttons.forEach(button => {
  button.addEventListener("click", () => {
      // Some Code Here
  });
});

需要注意的是 getElementsByClassName返回 HTML Collection
因此将其转换为可迭代对象很重要，在我们的例子中使用扩展运算符。
至于让选项卡显示正确内容的另一个问题，您或多或少是在正确的道路上，我只会使用 classList 代替，并且没有真正需要遍历所有元素。
我也提供了一个示例，如果您有任何问题，请告诉我!

const toggleActive = (buttonId) => {
  const buttonClicked = document.getElementById(buttonId);
  const currentActiveBtn = document.getElementsByClassName("active")[0];

  currentActiveBtn.classList.remove("active");
  buttonClicked.classList.add("active")

}

const toggleShow = (contentId) => {
  const contentToShow = document.getElementById(contentId);
    const currentShownContent = document.getElementsByClassName("show")[0];
  
  currentShownContent.classList.remove("show");
  contentToShow.classList.add("show")
}

const buttons = [...document.getElementsByClassName("tablinks")];

buttons.forEach(button => {
  button.addEventListener("click", () => {
    toggleActive(button.id)
    
    const contentId = "content" + button.id.charAt(button.id.length - 1);
    
    toggleShow(contentId);
  });

})

.tabcontent {
  display: none;
}

.active {
  color: red;
}

.show {
  display: block
}

<div class="tab-container">
  <button class="tablinks active" id="btn1">Fit Guide</button>
  <button class="tablinks" id="btn2">Care</button>
  <button class="tablinks" id="btn3">Material</button>
</div>
<div id="content1" class="tabcontent show">
  <p>Content for Tab 1</p>
  <p>Hello World from Tab 1!</p>
</div>
<div id="content2" class="tabcontent">
  <p>Content for Tab 2</p>
  <p>Hello Again from Tab 2!!</p>
</div>
<div id="content3" class="tabcontent">
  <p>Content for Tab 3</p>
  <p>Okay Bye now!</p>
</div>