Question

运行代码，然后单击第一行选项卡的最后一个选项卡。

<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（在菜单中更改），则不会发生此问题

任何想法？

Answer 1

这是因为jQuery UI CSS将它自己的类添加到活动选项卡并插入一个margin-bottom规则。添加自己的覆盖它。

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

<强> jsFiddle example

添加时，JQuery标签会混乱

1 个答案: