yui - 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 tabview 显示三个选项卡，如下所示：

第一个选项卡显示#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/