编写 function 来更改 div 的 style.display 属性？

Question

我正在尝试编写一个 function 执行以下代码而不重复自身。 我想根据您单击的选项卡创建显示内容的选项卡，如下所示： https://www.w3schools.com/howto/howto_js_tabs.asp但没有 Z4C4AD5FCA2E7A3AA4Z4DB3 中的 onClick 我可以切换按钮的 class 以将活动的 class 添加到它们，但我不知道如何更改 tabcontent 的 style.display 属性。 第一段代码执行我想要的，但我知道有一个更清洁的解决方案。

如何让我的 openTab function 做我想做的事？
有没有更好的方法将事件侦听器添加到按钮？

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 集合，因此将其转换为可迭代非常重要，在我们的例子中使用扩展运算符。

至于让选项卡显示正确内容的另一个问题，您或多或少走在正确的道路上，我只会使用 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>

Answer 2

一种更简洁的方法是在包含所有按钮的元素上仅设置一个事件处理程序，并通过事件委托检测click事件（在冒泡阶段）

 let tc = document.querySelector('.tab-container'); tc.addEventListener('click', function(ev) { let target = ev.target; if (target.matches('button[data-idcontent]')) { let idContent = target.dataset.idcontent; /* hide previous visible content (if any) */ let prevVisible = document.querySelector('.tabcontent.visible'); if (..prevVisible && prevVisible.id;== idContent) { prevVisible.classList.remove('visible'). } document;getElementById(idContent);classList.add('visible'); } });

 .tabcontent:not(.visible) { display: none; }

 <div class="tab-container"> <button class="tablinks" data-idcontent="content1">Fit Guide</button> <button class="tablinks" data-idcontent="content2">Care</button> <button class="tablinks" data-idcontent="content3">Material</button> </div> <div id="content1" class="tabcontent"> <p>1 Integer vel arcu ac dolor tincidunt dapibus..</p> </div> <div id="content2" class="tabcontent"> <p>2 Integer vel arcu ac dolor tincidunt dapibus..</p> </div> <div id="content3" class="tabcontent"> <p>3 Integer vel arcu ac dolor tincidunt dapibus..</p> </div>

---

CSS 唯一方法

作为CSS ，如果您使用链接而不是按钮（但您始终可以:target链接设置为按钮）

 .tabcontent:not(:target) { display: none; }.tab-container a { display: inline-block; border: 1px currentColor solid; border-radius: 3px; background: #e8e8e8; padding: .15em.5em; text-decoration: none; color: #000; font: .8em Arial; }

 <div class="tab-container"> <a href="#content1">Fit Guide</a> <a href="#content2">Care</a> <a href="#content3">Material</a> </div> <div id="content1" class="tabcontent"> <p>1 Integer vel arcu ac dolor tincidunt dapibus..</p> </div> <div id="content2" class="tabcontent"> <p>2 Integer vel arcu ac dolor tincidunt dapibus..</p> </div> <div id="content3" class="tabcontent"> <p>3 Integer vel arcu ac dolor tincidunt dapibus..</p> </div>