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();
    });    
});

DEMO ：JSFiddle

Answer 2

请参阅以下代码。

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

演示链接。 http://jsfiddle.net/asimshahiddIT/jrjjzw18/

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

2 个答案: