0

ボタンのクリックでjquery UIのネストされたタブを動的に作成しようとしていますが、メインタブしか機能しませんが、ネストされたタブは正しく表示されません。（注：以前にネストされたdivを定義したくありませんが、このdivを動的に作成したくありません）誰でも助けることができますか？

JSFiddle リンク: http://jsfiddle.net/ukalaspurkar/TqF9F/

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">

<div id="tabs">
    <ul>
    </ul>
</div>

    <input type='button' id='addTab' value='Add Main Tab & Nested Tab'>

</body>
</html>



$(function() {

    $("#addTab").click(function() {
        createNestedTabs();
    });

});


function createNestedTabs() {

    //Main Tab..Working fine..
    $("#tabs").append('<div id="mainTab">Main Tab Div</div> ');
    var tabs = $("#tabs").tabs();
    tabs.tabs('add', "#mainTab", "Main Tab");

    //Nested Tab for the above Main Tab..Not working
    $("#tabs").append('<div id="nestedTab1">Nested Tab Div</div> ');
    var nestedTabs = $("#nestedTab1").tabs();
    nestedTabs .tabs('add', "#nestedTab1", "Nested Tab 1");
}
4

1 に答える 1

2

2 番目の div の HTML 構造が欠落しています。動的に作成していても、最初の要素と同じ要素がいくつか必要です。次のようなことを試してください：

function createNestedTabs() {
    $("#tabs").append('<div id="mainTab">Main Tab Div</div> ');
    var tabs = $("#tabs").tabs();
    tabs.tabs('add', "#mainTab", "Main Tab");


    $("#mainTab").append('<div id="nestedTab1"><ul></ul></div> ');
    $("#nestedTab1").append('<div id="nestedTabContent">Nested tab</div>');
    var nestedTabs = $("#nestedTab1").tabs();
    nestedTabs.tabs('add', "#nestedTabContent", "Nested Tab 1");
}​

実演するためにフィドルを変更しました。

于 2012-10-10T22:09:22.033 に答える