1

我有以下要显示的嵌套选项卡

<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/

4

1 回答 1

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/

于 2013-10-29T19:17:55.457 回答