使用 JQuery 的 Javascript 隐藏/显示选项卡

Question

我有一个关于如何使用 jQuery 选项卡的快速问题（单击链接按钮以显示/隐藏某些 div）。 div id 与链接的 href 匹配：

HTML 链接：

<table class='layout tabs'>
<tr>
  <td><a href="#site">Site</a></td>
  <td><a href="#siteno">Number</a></td>
</tr>
<tr>
  <td><a href="#student">Student</a></td>

  <td><a href="#school">School</a></td>
</tr>
</table>
</div>

需要显示/隐藏的div：

<div id="site">
  <table class='explore'>
    <thead class='ui-widget-header'>
      <tr>
        <th class=' sortable'>
          Site
        </th>

        <th class=' sortable'>
          Number
        </th>
        </tr>
        </thead>
        </table>
</div>

Answer 1

$("table.tabs a").click( function() {
    var id = $(this).attr( "href" );
    var div = $(id);
    div.toggle();
} );

这会让你得到你想要的。但是，我怀疑您还想在显示一个 div 时隐藏所有其他 div。是吗？

好的，既然您已经回答这是真的，这是您的新代码。 您还应该向所有 DIV 添加一个类（在我的代码中 - “tab-div”），以便让它们一起轻松选择。

$("table.tabs a").click( function() {
    var id = $(this).attr( "href" );

    // Hide all the tab divs
    $(".tab-div").hide(); 

    // Then show the one that's been clicked
    $(id).show();
} );