需要修改 jQuery

jQuery modification needed

本文关键字：jQuery 修改      更新时间：2023-09-26

我正在尝试使用一些选项卡来表现，如下所示。 以下代码可以完成这项工作，但是单击Tab2后，Tab1的内容仍显示在右侧面板上，如果我单击Tab2上的项目/链接，它将显示在Tab1的内容下方。 我需要一个适当的 onClick 事件，以便在单击另一个选项卡后清除上一个选项卡的内容。 这是我的代码：

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

感谢所有的帮助。

你可以

使用jQuery非常轻松地做到这一点，使用.siblings()隐藏其他不活动的内容部分：

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

小提琴

请务必将代码包装在 <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>
相关文章：