1

运行代码跟随并单击第一行选项卡的最后一个选项卡。

http://jsfiddle.net/pKcJp/

<html>
</html>
<button id="addspan">Add tabs</button>
<div id="wrap">
    <ul></ul>
</div>

<script>
$(function () {
$('#wrap').tabs();
$('#addspan').click(function () {
    $('#wrap').tabs("add", "#page" + 1, 1);

    $('#wrap').tabs("add", "#page" + 2, 2);
    $('#wrap').tabs("add", "#page" + 3, 3);
    $('#wrap').tabs("add", "#page" + 4, 4);
    $('#wrap').tabs("add", "#page" + 5, 5);
    $('#wrap').tabs("add", "#page" + 6, 6);
    $('#wrap').tabs("add", "#page" + 7, 7);
    $('#wrap').tabs("add", "#page" + 8, 8);
    $('#wrap').tabs("add", "#page" + 9, 9);
    $('#wrap').tabs("add", "#page" + 10, 10);
    $('#wrap').tabs("add", "#page" + 11, 11);
    $('#wrap').tabs("add", "#page" + 12, 12);
            $('#wrap').tabs("add", "#page" + 13, 13);
            $('#wrap').tabs("add", "#page" + 14, 14);
            $('#wrap').tabs("add", "#page" + 15, 15);
            $('#wrap').tabs("add", "#page" + 16, 16);
            $('#wrap').tabs("add", "#page" + 17, 17);
            $('#wrap').tabs("add", "#page" + 18, 18);
            $('#wrap').tabs("add", "#page" + 18, 18);
            $('#wrap').tabs("add", "#page" + 18, 18);
});
});
</script>

看到有一个无序的标签。

如果 Jquery 版本更改为 1.7.2 并且 jquery-ui 更改为 1.8.18（在菜单中更改），则不会出现此问题

任何想法？

4

1 回答 1

3

这是因为 jQuery UI CSS 将它自己的类添加到活动选项卡并插入底部边距规则。添加您自己的以覆盖它。

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

jsFiddle 示例

于 2013-03-01T20:36:04.413 回答