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

Question

我正在尝试创建这样的东西: http://www.keepandshare.com/userpics/d/a/v/e/8528sky/2014-11/sm/tabs-39983986.jpg?ts=1416433877我有:

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

上面代码的问题是，如果我点击 TAB2 并重复相同的代码，之前的内容仍然显示在上面，并且需要在加载新标签内容时隐藏它。谢谢。

Answer 1

因为你标记了 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>

JavaScript

$(function() {
    $(".tabClicker").click(function() {
        var tab = $(this).attr("data-tab");
        $(".tabContent").hide();
        $("#" + tab).show();
    });    
});

演示:JSFiddle