Javascript 如何在加载新选项卡时显示每个选项卡内容并隐藏以前的内容

我正在尝试创建如下内容： 我有：

    <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 info 1 content</div>
<div id="tabs-2" style="display: none">Tab1 info 2 content</div>
<div id="tabs-3" style="display: none">Tab1 info 3 content</div>

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

功能显示选项卡（已选，总计）
{
对于（i=1；i因为您标记了jQuery，所以我做了一个jQuery答案。我将这样做：

HTML

<div id="tabs-1" class="tabContent" style="display: none">Tab1 info 1 content</div>
<div id="tabs-2" class="tabContent" style="display: none">Tab1 info 2 content</div>
<div id="tabs-3" class="tabContent" style="display: none">Tab1 info 3 content</div>
<ul class="side bar tabs">
  <li class="tabClicker" data-tab="tabs-1">Tab1 info 1</li>
  <li class="tabClicker" data-tab="tabs-2" >Tab1 info 2</li>
  <li class="tabClicker" data-tab="tabs-3">Tab1 info 3</li>  
</ul>

演示：
请查看下面的代码

 <div id="tabs-1" class="tabContent" >Tab1 info 1 content</div>
 <div id="tabs-2" class="tabContent">Tab1 info 2 content</div>
 <div id="tabs-3" class="tabContent" >Tab1 info 3 content</div>

 <ul class="side bar tabs">
  <li class="tabClicker" data-tab="tabs-1">Tab1 info 1</li>
  <li class="tabClicker" data-tab="tabs-2" >Tab1 info 2</li>
  <li class="tabClicker" data-tab="tabs-3">Tab1 info 3</li>  
 </ul>

 <script>
  $(function() {
     $(".tabClicker").click(function() {
      var tab = $(this).attr("data-tab");
       $(".tabContent").hide();
       $("#" + tab).show();
    });    
});
 </script>
     <style>
      .tabContent {
      display:none;
   }
   </style>

Tab1信息1内容
表1信息2内容
表1信息3内容

Tab1信息1
Tab1信息2
Tab1信息3

$（函数（）{
$（“.tabClicker”）。单击（函数（）{
var tab=$（this.attr（“数据选项卡”）；
$（“.tabContent”）.hide（）；
$（“#”+tab.show（）；
});    
});
.tabContent{
显示：无；
}

演示链接。
我尝试了你的建议，但它根本没有显示内容。所以你知道，我将它放在Wordpress的可视内容插件中。我的原始代码确实显示了内容，但上面的代码没有！@user3610349你确定你在使用jQuery吗？正如你看到的那样，我的演示正在运行。请注意，我在元素中添加了一些类。谢谢马克。我没有我在演示中演示了这些类及其工作原理，但无论出于何种原因，当我将它们放入我的页面时，它们对我不起作用。请自己回答，而不是复制我的答案。您的代码在定义用于隐藏的内联样式css时不起作用。这永远不会适用于此场景。False，jQuery将使用自己的内联css覆盖此内联css。show（）函数的工作原理如下：如果（element.style.display=“none”）{element.style.display=“block”}则hide（）函数的工作方式相同，但它将隐藏元素。
 <div id="tabs-1" class="tabContent" >Tab1 info 1 content</div>
 <div id="tabs-2" class="tabContent">Tab1 info 2 content</div>
 <div id="tabs-3" class="tabContent" >Tab1 info 3 content</div>

 <ul class="side bar tabs">
  <li class="tabClicker" data-tab="tabs-1">Tab1 info 1</li>
  <li class="tabClicker" data-tab="tabs-2" >Tab1 info 2</li>
  <li class="tabClicker" data-tab="tabs-3">Tab1 info 3</li>  
 </ul>

 <script>
  $(function() {
     $(".tabClicker").click(function() {
      var tab = $(this).attr("data-tab");
       $(".tabContent").hide();
       $("#" + tab).show();
    });    
});
 </script>
     <style>
      .tabContent {
      display:none;
   }
   </style>