使用JQuery的Javascript隐藏/显示选项卡 [英] Javascript hide/show tabs using JQuery

问题描述

我对如何使用jQuery选项卡有一个快速的问题(单击链接按钮以显示/隐藏某些div). div ID与链接的href相匹配:

I have a quick question of how I can use jQuery tabs (you click on link button to display/hide certain divs). The div id matches the href of the link:

HTML链接:

HTML links:

<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 that needs to display/hide:

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

推荐答案

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

这将为您提供确切的要求.但是，我怀疑您还希望在显示一个div时隐藏所有其他div.是真的吗?

This will get you exactly what you're asking. However, I suspect that you also want to hide all other divs when one div is shown. True?

好吧，现在您已经回答了这是真的，这是您的新代码. 您还应该为所有DIV添加一个类(在我的代码中为"tab-div")，以便可以轻松地将它们一起选择.

Ok, now that you've responded that it's true, here's your new code. You also should add a class (in my code - "tab-div") to all your DIVs, in order to have them easily selectable all together.

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

这篇关于使用JQuery的Javascript隐藏/显示选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！