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

您缺少第二个 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 回答