jQuery1.7.1およびjQueryUI1.8.21の使用。
カスタムjQueryUIタブのバグに苦しんでいます。私のタブは通常の水平タイプではありません。ある種のグリッドとして垂直（固定幅）に表示され、コンテンツは右側にあります（下の図を参照）。
今私の問題は、行の最後のタブ（5,10,15、...）を選択するたびにすべてがダウンし、6が5の下に来ることです。右の図は問題を示しています。
タブを使用する理由は、前のプロジェクトの約3万行を使用できるためです。
これが私の垂直タブです：
$("#chapters")
.tabs({ ... })
.addClass('ui-tabs-vertical ui-helper-clearfix');
私のCSSには、多くのテストや間違い、役に立たない部分が含まれていますが、それでも：
.ui-tabs-vertical .ui-tabs-nav
{
padding: 2px;
float: left;
width: 185px;
display:inline;
}
.ui-tabs-vertical .ui-tabs-nav li
{
width:30px;
height:30px;
margin: 2px;
padding:0;
display:inline;
}
.ui-tabs-vertical .ui-tabs-nav li a
{
display:block;
margin:0;padding:0;width:100%;height:100%;
}
.ui-tabs-vertical .ui-tabs-nav li a span
{
display:block;
padding:0;
margin:0;
width:100%;
height:100%;
text-align: center;
line-height: 30px;
vertical-align: middle;
}
.ui-tabs-vertical .ui-tabs-panel
{
padding: 3px;
padding-left:200px;
max-width: 548px; /* = 768px -10-paddings */
}
.ui-tabs-vertical .ui-state-active
{
border: 0 solid #000000;
}
.ui-tabs-vertical .ui-tabs-selected
{
padding-bottom: 0 !important;
border: 0 solid #000000;
}
コメントで要求されたHTMLは、これらのタブを多かれ少なかれランダムに処理するアルゴリズムが多数あるため、JSを介して完全に生成されます。そのため、構造は次のとおりです。
<div id="chapters" style="position:relative" class="ui-tabs">
<ul>
<!-- li tags coming from a for-loop -->
<li>
<a href="#800001"> <!-- random id but matching divs order -->
<span style="float:left">1</span> <!-- 1,2,3... -->
</a>
</li>
<!-- ... -->
<div id="800001" class="ui-tabs-hide">
<div id="800001_content">
<!-- content is loaded here later... (xml parsing, lazy loading system,...) -->
</div>
</div>
<!-- end of loop -->
</ul>
</div>
これが私がこれまでに見つけたものです：
- jQueryを1.8.0に更新しました。変更はありません。
- jQuery UIを1.8.23に更新しましたが、変更はありません。
- ui-tabsを削除しました-firebugでライブを選択しましたが、結果はありません。
- ui-state-active live with firebugを削除しましたが、結果はありません。
- タブ（cssの最後の部分）から境界線を削除しましたが、結果はありません。
- ui-tabs-selectedとui-state-activeの両方を削除しました。デザインは壊れません。
- selectまたはshowイベントでjQueryを使用してui-tabs-selectedおよびui-state-activeを削除しました。
私の最後の結果から、jQuery UI Tabsは、remove.tabが必要な選択したタブにCSSを適用していると思います。残念ながら、これらのクラスを削除するとタブ機能が壊れます。.tabs（ "option"、 "selected"）を設定することはできません。最初のタブに移動するだけで、もちろん必要です。だから私はこのウィジェットのコードを調べましたが、運がありませんでした...
私は、CSS、Javascript、フェイスパルミング、さらには洗脳など、あらゆる種類のソリューションを受け入れます。.tabs（）が私の問題の原因である場合、.tabs（）の変更されたクローンとして.verticalTabs（）があることを想像できます。
タブを非表示にし、タブを選択するためのイベントを含むカスタムグリッドを作成することで回避策をすでに想像していましたが、別のパスを見つけたいと思います。:-)
よろしくお願いします！
試してみるJSFiddle：http: //jsfiddle.net/zumproductions/v26pE/