1

使用 jQuery 1.7.1 和 jQuery UI 1.8.21。

我正在为我的自定义 jQuery UI Tabs中的一个错误而苦苦挣扎。我的标签不是通常的水平类型，我将它们垂直显示（固定宽度）作为某种网格，我的内容在右侧（见下图）。

现在我的问题是，每当我选择该行的最后一个选项卡(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，没有变化。
  • 删除 ui-tabs-selected live with firebug，没有结果。
  • 与萤火虫一起移除了 ui-state-active ，没有结果。
  • 从选项卡（css的最后一部分）中删除了边框，没有结果。
  • 删除了 ui-tabs-selected 和 ui-state-active，设计不会中断。
  • 在 select 或 show 事件中使用 jQuery 删除了 ui-tabs-selected 和 ui-state-active。

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

我愿意接受任何类型的解决方案，CSS、Javascript、手掌甚至洗脑。如果 .tabs() 是我的问题的根源，我可以想象将 .verticalTabs() 作为 .tabs() 的修改克隆。

我已经通过隐藏我的选项卡并使用事件创建自定义网格来选择选项卡来想象解决方法，但我宁愿找到另一条路径。:-)

在此先感谢您的帮助！

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

4

1 回答 1

2

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

在默认 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/

于 2012-08-21T15:45:22.500 回答