1

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

1 に答える 1

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

これにより、あなたが求めているものが正確に得られます。ただし、1 つの div が表示されているときに、他のすべての 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();
} );
于 2010-06-01T17:55:42.343 に答える