Javascript 如何隐藏其他选项卡'；s内容并仅显示所选选项卡'；内容

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

函数showStuff（id）{
if（document.getElementById（id.style.display==“block”）{
document.getElementById（id）.style.display=“无”；
}否则{
document.getElementById（id）.style.display=“block”；
}
}

城市
国家/地区
人性

普罗因精英酒店

马萨尤德酒店

苏打水

您必须首先为所有选项卡内容设置一个

显示：none

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>

功能显示选项卡（已选，总计）
{
对于（i=1；i我认为应该这样做：

<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>


城市
国家/地区
人性化

函数showStuff（id）
{
document.getElementById（“tabs-1”）.style.display=“无”；
document.getElementById（“tabs-2”）.style.display=“无”；
document.getElementById（“tabs-3”）.style.display=“无”；
document.getElementById（id）.style.display=“block”；
}
表1内容
表2内容
表3内容

$（函数（）{
$（“#制表符”）.tabs（）；
});





..............
..............
..............
您可以试试这个

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

或者，另一种方法是给所有选项卡内容元素一个公共CSS类，使它们的选择和样式设置更加容易，例如在下面的和代码中

CSS

.tabContent {
    display:none;
}

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, '-$1');
    document.getElementById(tabContentIdToShow).style.display = 'block';
}

函数showStuff（元素）{
var tabContents=document.getElementsByClassName（'tabContent'）；
对于（var i=0；i

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>


城市
国家/地区
人性

普罗因精英酒店

马萨尤德酒店

苏打水


我还将
showElement
函数更新为更通用的函数，以便在隐藏和显示正确的选项卡内容时减少代码重复

唯一需要注意的是，IE8或以下版本中没有此功能。有此功能，但还有其他选项-请参见。
您可以为选项卡内容添加HTML吗？您是否为选项卡内容设置了
id
？是的，我所有的选项卡内容都有id，它们是选项卡标题，对于选项卡内容，我已经这样做了。不，使用jQuery和jQueryUI是不一定是最好的选择。它有大量JavaScript代码的开销。@andyb:同意，删除了这一行。谢谢。我不认为OP在寻找jQuery解决方案。我不认为OP在寻找jQuery解决方案。非常感谢andy！这看起来太棒了！
<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>