Question

使用jQuery 1.7.1和jQuery UI 1.8.21。

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

现在我的问题是每当我选择行的最后一个标签（5,10,15，...）时，一切都会下降，而6则是5，右图是问题：

enter image description here

使用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，没有结果。
用firebug移除了ui-state-active live，没有结果。
从标签中移除了边框（css的最后一部分），没有结果。
删除了两个ui-tabs-selected AND ui-state-active，设计不会中断。
在select或show事件中使用jQuery删除了ui-tabs-selected和ui-state-active。

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

我会对任何类型的解决方案，CSS，Javascript，面对赌博甚至洗脑都开放。如果.tabs（）是我的问题的根源，我可以想象.verticalTabs（）作为.tabs（）的修改克隆。

我已经通过隐藏我的标签并使用事件来制作自定义网格以选择标签来设想变通方法，但我宁愿找到另一条路径。： - ）

提前感谢您的帮助！

JSFiddle尝试一下：http://jsfiddle.net/zumproductions/v26pE/

Answer 1

如果从.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/

jQuery UI选项卡显示为垂直网格 - 上次选择的选项卡中断了设计

1 个答案: