CSS JS选项卡-不隐藏当前内容如果单击另一个选项卡，

<div class="tab">
  <button class="tab-button" onclick="showTabContent(1)">Tab 1</button>
  <button class="tab-button" onclick="showTabContent(2)">Tab 2</button>
  <button class="tab-button" onclick="showTabContent(3)">Tab 3</button>
</div>

<div class="tab-content" id="tab-content-1">
  Content for Tab 1
</div>

<div class="tab-content" id="tab-content-2">
  Content for Tab 2
</div>

<div class="tab-content" id="tab-content-3">
  Content for Tab 3
</div>

.tab-content {
  display: none;
}

.tab-content.show {
  display: block;
}

function showTabContent(tabIndex) {
  // 隐藏所有选项卡内容
  var tabContents = document.getElementsByClassName("tab-content");
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].classList.remove("show");
  }
  
  // 显示当前选项卡内容
  var currentTabContent = document.getElementById("tab-content-" + tabIndex);
  currentTabContent.classList.add("show");
}

function showTabContent(tabIndex) {
  // 隐藏所有选项卡内容
  var tabContents = document.getElementsByClassName("tab-content");
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }
  
  // 显示当前选项卡内容
  var currentTabContent = document.getElementById("tab-content-" + tabIndex);
  currentTabContent.style.display = "block";
}