テーブルレイアウト内のJqueryタブ

Question

"タブ"したい部分は、ネストしたテーブルレイアウトの内側にあります。

それは、このようなテーブルの混乱の後に開始：私はjqueryの-UI-1.7.1への参照を追加した、と私のjsファイルで、私が持っている

<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> 
     <div id ="SearchModuleContainer"> 
     <ul class="tabNavigation"> 
      <li><a href="#PersonSearchPanel"></a></li> 
      <li><a href="#TypeSearchPanel"></a></li> 
     </ul> 

     <div id="PersonSearchPanel" runat="server"> 
     <table width="100%" border="0" cellspacing="0"> 
      <tr> 
      <td align="center" valign="top"> 
       <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
        <tr> 
      ... 
      ... 
     </div> 
     <div id="TypeSearchPanel" runat="server"> 
     <table width="100%" border="0" cellspacing="0"> 
      <tr> 
      <td align="center" valign="top"> 
       <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
        <tr> 
      ... 
      ... 
     </div> 
    </div> 

：

$(document).ready(function() { 
    $("#SearchModuleContainer").tabs(); 
}); 

を

私は何かを見逃してしまったのですか？これと同じようにテーブルレイアウトが乱れた古い学校の中でjqueryを使うときに問題がありますか？

Answer 1

ui-tabs-hide、ui-tabs-selected-クラスに対してCSSが正しく実装されていることを確認する必要があります。これを正しく行っていなければ、スクリプトが機能していないように見えます。これをチェックする最も簡単な方法は次のとおりです：

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css" /> 

これをjavascriptファイルより前のhtmlページのheadセクションに追加してください。私はあなたの例をテストし、タブの機能はテーブルで動作します。

[編集]テストサンプルhereのソースコードを貼り付けました。