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/

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

更新

在HanletEscañ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/

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

1 个答案: