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

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

1 голос
/ 01 июня 2010

У меня есть быстрый вопрос о том, как я могу использовать вкладки 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>

1 Ответ

2 голосов
/ 01 июня 2010 
$("table.tabs a").click( function() {
    var id = $(this).attr( "href" );
    var div = $(id);
    div.toggle();
} );

Это даст вам именно то, что вы просите. Тем не менее, я подозреваю, что вы также хотите скрыть все остальные div, когда отображается один div. Правда?

Хорошо, теперь, когда вы ответили, что это правда, вот ваш новый код. Вы также должны добавить класс (в моем коде - «tab-div») для всех ваших 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();
} );
...