Question

我正在尝试使用一些标签来显示here。以下代码完成了这项工作，但是在单击Tab2时，Tab1的内容仍显示在右侧面板上，如果我单击Tab2上的项目/链接，它将显示在Tab1的内容下方。我需要一个正确的onClick事件，以便在单击另一个Tab时清除之前Tab的内容。这是我的代码：

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

感谢您的帮助。

Answer 1

您可以使用.siblings()使用jQuery轻松完成此操作，以隐藏其他未激活的内容部分：

<强> JS

$("ul.side.bar.tabs li").click(function(){
   var grabName = $(this).attr("class");
    $("#tab-"+grabName).show().siblings("div").hide();
});

<强> HTML

<div id="tab-one" style="display: none">Tab1 info 1 content</div>
<div id="tab-two" style="display: none">Tab1 info 2 content</div>
<div id="tab-three" style="display: none">Tab1 info 3 content</div>

<ul class="side bar tabs">
  <li class="one">Tab1 info 1</li>
  <li class="two">Tab1 info 2</li>
  <li class="three">Tab1 info 3</li>  
</ul>

FIDDLE

请务必将代码包装在<head></head>部分的就绪函数中：

<head>
   //link to jquery

   <script>
      $(document).ready(function(){
         $("ul.side.bar.tabs li").click(function(){
            var grabName = $(this).attr("class");
            $("#tab-"+grabName).show().siblings("div").hide();
         });
      });
   </script>
</head>

需要jQuery修改

1 个答案: