Html 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

How to hide other tabs's content and display only the selected tab's content

提问by user1223844

When I click on a particular tab the other tabs's content should be hidden but it is not hiding. This is all the code I have.

当我点击一个特定的标签时，其他标签的内容应该被隐藏，但它没有隐藏。这是我所有的代码。

function showStuff(id) {
  if (document.getElementById(id).style.display === "block") {
    document.getElementById(id).style.display = "none";
  } else {
    document.getElementById(id).style.display = "block";
  }
}

<ul class="side bar tabs">
  <li id="tabs1" onclick="showStuff('tabs-1')">City</li>
  <li id="tabs2" onclick="showStuff('tabs-2')">Country</li>
  <li id="tabs3" onclick="showStuff('tabs-3')">Humanity</li>
</ul>

<div id="tabs-1" style="display : none">
  <p>Proin elit m</p>
</div>
<div id="tabs-2" style="display : none">
  <p>M massa ut d</p>
</div>
<div id="tabs-3" style="display : none">
  <p> sodales.</p>
</div>

回答by andyb

Giving all the tab contentelements a common CSS class makes selecting and styling them much easier, for example in this demoand code below.

为所有选项卡内容元素提供一个通用的 CSS 类使得选择和样式化它们变得更加容易，例如在这个演示和下面的代码中。

CSS

CSS

.tabContent {
    display:none;
}

JavaScript

JavaScript

function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i < tabContents.length; i++) { 
        tabContents[i].style.display = 'none';
    }

    // change tabsX into tabs-X in order to find the correct tab content
    var tabContentIdToShow = element.id.replace(/(\d)/g, '-');
    document.getElementById(tabContentIdToShow).style.display = 'block';
}

HTML

HTML

<ul class="side bar tabs">
    <li id="tabs1" onclick="showStuff(this)">City</li>
    <li id="tabs2" onclick="showStuff(this)">Country</li>
    <li id="tabs3" onclick="showStuff(this)">Humanity</li>  
</ul>

<div id="tabs-1" class="tabContent">
    <p>Proin elit m</p>
</div>
<div id="tabs-2" class="tabContent">
    <p>M massa ut d</p>
</div>
<div id="tabs-3" class="tabContent">
    <p> sodales.</p>
</div>

I have also updated the showElementfunction to be more generic so that there is less code duplication when hiding and showing the correct tab content.

我还更新了该showElement功能，使其更加通用，以便在隐藏和显示正确的选项卡内容时减少代码重复。

The only caveat is that getElementsByClassName()is not available in IE8 or below. Other (modern) browsershave this function but there are alternatives - see getElementsByClassName & IE8: Object doesn't support this property or method.

唯一的警告是getElementsByClassName()在 IE8 或更低版本中不可用。其他（现代）浏览器具有此功能，但还有其他选择 - 请参阅getElementsByClassName & IE8: Object does not support this property or method。

回答by MahanGM

You have to first set a display: nonefor all of your tab contents.

您必须首先display: none为所有选项卡内容设置 a 。

e. g.

例如

<script type="text/javascript">
function showTab(selected, total)
{
  for(i = 1; i <= total; i += 1)
  {
    document.getElementById('tabs-' + i).style.display = 'none';
  }

  document.getElementById('tabs-' + selected).style.display = 'block';
}
</script>

<div id="tabs-1" style="display: none">tab1</div>
<div id="tabs-2" style="display: none">tab2</div>
<div id="tabs-3" style="display: none">tab3</div>

<ul class="side bar tabs">
  <li id = "tabs1" onclick = "showTab(1,3)">City</li>
  <li id = "tabs2" onclick = "showTab(2,3)">Country</li>
  <li id = "tabs3" onclick = "showTab(3,3)">Humanity</li>  
</ul>

If there is something like this with your code, I'm sure that it's going to work. BTW, Check your Console window for JavaScript errors.

如果你的代码有类似的东西，我相信它会起作用。顺便说一句，检查您的控制台窗口是否有 JavaScript 错误。

回答by Tdy

I think that this should do it:

我认为应该这样做：

<ul class="side bar tabs">
    <li  id = "tabs1" onclick = "showStuff('tabs-1')">City</li>
    <li  id = "tabs2" onclick = "showStuff('tabs-2')">Country</li>
    <li  id = "tabs3" onclick = "showStuff('tabs-3')">Humanity</li>  
</ul>

  <script type="text/javascript">
  function showStuff (id) 
  {

        document.getElementById("tabs-1").style.display = "none";
        document.getElementById("tabs-2").style.display = "none";
        document.getElementById("tabs-3").style.display = "none";
        document.getElementById(id).style.display = "block";

  }
  </script>

  <div id="tabs-1" style="display:none">tabs 1 content</div>
  <div id="tabs-2" style="display:none">tabs 2 content</div>
  <div id="tabs-3" style="display:none">tabs 3 content</div>

回答by Vaibhav Jain

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

<div id="tabs">
 <ul>
  <li><a href="#tabs-1">City</a></li>
  <li><a href="#tabs-2">Country</a></li>
  <li><a href="#tabs-3">Humanity</a></li>
 </ul>
 <div id="tabs-1">..............</div>
 <div id="tabs-2">..............</div>
 <div id="tabs-3">..............</div>
</div>

回答by gewel

you can try this

你可以试试这个

 function showStuff(id){
$('#tabs1').empty();
  $('#tab2').show();
}

or the other way

或者其他方式