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

Question

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

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

javascript jquery tabs html-table show-hide

задан Brian Tompsett - 汤莱恩 30 May 2017 в 19:25

1 ответ

Другие вопросы по тегам:

javascript jquery tabs html-table show-hide

Похожие вопросы:

score 2 · Accepted Answer

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