显示为垂直网格的 jQuery UI 选项卡 - 最后选择的制表符中断设计

Question

使用 jQuery 1.7.1 和 jQuery UI 1.8.21。

我正在努力解决我的自定义 jQuery UI 标签 中的错误。我的选项卡不是通常的水平类型，我将它们垂直(固定宽度)显示为某种网格，我的内容位于右侧(见下图)。

现在我的问题是，每当我选择该行的最后一个选项卡时，一切都会下降(5、10、15，...)，并且 6 低于 5。右图说明了问题:

使用 Tabs 的原因是我可以使用之前元素中的大约 30k 行。

这是我的垂直标签:

$("#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，没有变化。
• 使用 firebug 删除了 ui-tabs-selected live，没有结果。
• 使用 firebug 删除了 ui-state-active live，没有结果。
• 删除了选项卡的边框(css 的最后一部分)，没有结果。
• 删除了 ui-tabs-selected 和 ui-state-active，设计没有中断。
• 在选择或显示事件中使用 jQuery 删除了 ui-tabs-selected 和 ui-state-active。

根据我上次的结果，我猜想 jQuery UI Tabs 正在将一些 CSS 应用到我需要删除的选定选项卡。tab。不幸的是，删除这些类会破坏选项卡功能，无法设置 .tabs("option","selected") 它只会转到第一个选项卡，当然我需要它。所以我查看了这个小部件的代码，但没有任何运气......

我会对任何类型的解决方案持开放态度，CSS、Javascript、捏脸甚至洗脑。如果 .tabs() 是我的问题的根源，我可以想象将 .verticalTabs() 作为 .tabs() 的修改克隆。

我已经想到了解决方法，方法是隐藏我的选项卡并制作一个带有事件的自定义网格来选择选项卡，但我宁愿找到另一条路。 :-)

预先感谢您的帮助!

JSFiddle 试用:http://jsfiddle.net/zumproductions/v26pE/

Answer 1

如果从 li 元素中删除 .ui-tabs-selected 类，问题就会消失。所以里面有东西。特别是看起来以下样式是问题所在:

在默认的 CSS 中:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
   margin-bottom: 0;
}

您的自定义 CSS:

.ui-tabs-vertical .ui-tabs-selected {
    border: 0 solid #000000;
}

要修复它，您可以设置这些样式:margin-bottom: 2px 和 border 1px solid transparent

更新的 jsfiddle:http://jsfiddle.net/v26pE/3/