Jquery嵌套选项卡

时间:2011-12-24 15:37:13

标签: javascript jquery-ui user-interface

  

可能重复:
  Unable to get jquery tabs nested

我需要创建一个嵌套选项卡。但我没有得到谷歌满意的解决方案。谁能建议我一个解决方案?我不是java脚本或jquery程序员。

提前致谢!

1 个答案:

答案 0 :(得分:3)

以下是解决方案:http://jsfiddle.net/bpJUv/1/

<强> JS

$('#tabs').tabs();
$('#tabs1').tabs();
$('#tabs2').tabs();

<强> HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First tab</a></li>
        <li><a href="#tabs-2">Second tab</a></li>
    </ul>
    <div id="tabs-1">
        <p>
            <div id="tabs1">
                <ul>
                    <li><a href="#tabs-11">First nested 1</a></li>
                    <li><a href="#tabs-12">Second nested 1</a></li>
                </ul>
                <div id="tabs-11">
                    <p>Content for first nested tab 1</p>
                </div>
                <div id="tabs-12">
                    <p>Content for second nested tab 2</p>
                </div>
            </div>            
        </p>
    </div>
    <div id="tabs-2">
        <p>
            <div id="tabs2">
                <ul>
                    <li><a href="#tabs-21">First nested tab 2</a></li>
                    <li><a href="#tabs-22">Second nested tab 2</a></li>
                </ul>
                <div id="tabs-21">
                    <p>Content of first nested tab 2</p>
                </div>   
                <div id="tabs-22">
                    <p>Content of second nested tab 2</p>
                </div>
            </div>        
        </p>
    </div>
</div>