Javascript 使用 JQuery 隐藏/显示标签

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