您如何在javascript中关闭/隐藏html导航标签？

Question

我正在做一个项目，我希望能够隐藏/关闭一个选项卡，因为在刷新页面之前，该选项卡将保持打开状态。

关闭： 打开：

我正在使用javascript将其打开并显示tabcontent。但是，当您单击选项卡和单击选项卡标题时，我希望将其关闭。

JS：

function openPage(pageName, elmnt, color) {
  // Hide all elements with class="tabcontent" by default */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the background color of all tablinks/buttons
  tablinks = document.getElementsByClassName("tablink1");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }

  // Show the specific tab content
  document.getElementById(pageName).style.display = "block";

  // Add the specific color to the button used to open the tab content
  elmnt.style.backgroundColor = color;
  }

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

很抱歉，如果有人已经问过这个问题，但是我需要一些帮助。预先感谢！

Answer 1

将关闭所有标签页的代码提取到一个单独的函数中，然后在要关闭所有标签页时直接调用此函数：

function closeAll()
{
  // Hide all elements with class="tabcontent" by default */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the background color of all tablinks/buttons
  tablinks = document.getElementsByClassName("tablink1");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
}

function openPage(pageName, elmnt, color) {
  closeAll();

  // Show the specific tab content
  document.getElementById(pageName).style.display = "block";

  // Add the specific color to the button used to open the tab content
  elmnt.style.backgroundColor = color;
}

// close all tabs
closeAll();