jQuery UI 选项卡小部件和嵌套列表

Question

>我有以下嵌套选项卡，我想在其中显示

<div id="1">
<ul>
    <li><a href="#a">A</a></li>
    <li><a href="#aa1c">B</a></li>
    <li><a href="#aa2c">C</a></li>
</ul>
<div id="a">
    <div id="aa1h">
        Sub Tab AA1 Header
    </div>
    <div id="aa1c">
        Sub Tab AA1 Content 
    </div>        
    <div id="aa2h">
        Sub Tab AA2 Header
    </div>
    <div id="aa2c">
        Sub Tab AA2 Content 
    </div>       
 </div>
</div>

$('#1').tabs();

现在我想使用 jQuery 选项卡或 YUI 选项卡视图显示三个选项卡，如下所示：

第一个选项卡显示 #a（整个内容）第二个选项卡显示 #aa1c（仅限 aa1 的内容）第三个选项卡显示 #aa2c（仅限 aa2 的内容）

我对这种方法有一些问题，任何帮助不胜感激。

http://jsfiddle.net/RQcwE/1/

请参阅上面的示例以了解我的问题。

更新：

在Hanlet Escaño的帮助下，我用几个空白的div和一些jQuery代码实现了我想要的东西。

http://jsfiddle.net/RQcwE/3/

Answer 1

这是一个包含可能适合您的子选项卡的示例：

<div id="1">
    <ul>
        <li><a href="#a">A</a></li>
        <li><a href="#b">B</a></li>
        <li><a href="#c">C</a></li>
    </ul>
    <div id="a">
        <ul>
            <li><a href="#aa1">Sub A 1</a></li>
            <li><a href="#aa2">Sub A 2</a></li>
        </ul>
        <div id="aa1">
            Sub Tab A content 1
        </div>
        <div id="aa2">
            Sub Tab A content 2
        </div>
     </div>
    <div id="b">
        <ul>
            <li><a href="#bb1">Sub B 1</a></li>
            <li><a href="#bb2">Sub B 2</a></li>
        </ul>
        <div id="bb1">
            Sub Tab B content 1
        </div>
        <div id="bb2">
            Sub Tab B content 2
        </div>
     </div>
    <div id="c">
        <ul>
            <li><a href="#cc1">Sub C 1</a></li>
            <li><a href="#cc2">Sub C 2</a></li>
        </ul>
        <div id="cc1">
            Sub Tab C content 1
        </div>
        <div id="cc2">
            Sub Tab C content 2
        </div>
     </div>
</div>

你只需像这样构建它们：

$("#1" ).tabs();
$("#a" ).tabs();
$("#b" ).tabs();
$("#c" ).tabs();

JSFiddle： http://jsfiddle.net/p84kC/