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 が独自のクラスをアクティブなタブに追加し、margin-bottom ルールを挿入するためです。独自のものを追加してオーバーライドします。

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

jsFiddle の例

于 2013-03-01T20:36:04.413 に答える