Javascript скрыть/показать вкладки с помощью JQuery

Question

У меня есть быстрый вопрос о том, как я могу использовать вкладки jQuery (вы нажимаете кнопку ссылки, чтобы отображать/скрывать определенные div). ДИВ идентификатор соответствует 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. Правда?

Хорошо, теперь, когда вы ответили, что это правда, вот ваш новый код. Вы также должны добавить класс (в моем коде - «tab-div») ко всем своим DIVs, чтобы они могли легко выбирать все вместе.

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