在多个手风琴中嵌套Jquery选项卡

时间:2013-03-05 11:51:35

标签: jquery menu tabs accordion

http://jsfiddle.net/SamHats/gjFUT/

我正在尝试使用手风琴中的标签创建一个带有JQuery的菜单。我需要将标签内容显示在手风琴之外。

我目前只是第一支显示标签的手风琴。

我的想法是我需要添加标签类,但我对JQuery很新。

$(function () {
    $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
});

1 个答案:

答案 0 :(得分:0)

我想你想要这个: 我剪切菜单并将其放在手风琴上方

http://jsfiddle.net/gjFUT/2/

<body>
    <div id="tabs">
         <div>
                <ul>
                    <li><a href="#tabs-1">Records</a>

                    </li>
                    <li><a href="#tabs-2">Notes</a>

                    </li>
                    <li><a href="#tabs-3">Diary</a>

                    </li>
                </ul>
            </div>
        <div id="accordion" class="panel" style="clear:both">
                <h3>Darwin Tutorial</h3>


             <h4>User Guide</h4>

            <div>
                <ul>
                    <li><a href="#tabs-4">Other 4</a>

                    </li>
                    <li><a href="#tabs-5">Other 5</a>

                    </li>
                    <li><a href="#tabs-6">Other 6</a>

                    </li>
                </ul>
            </div>
             <h3>Support</h3>

            <div></div>
        </div>
        <div class="rightpanel">
            <div id="tabs-1">
                    <h2>Records</h2>

                <iframe width="560" height="315" src="http://www.youtube.com/embed/cJLzekuukEE"
                frameborder="0" allowfullscreen></iframe>
            </div>
            <div id="tabs-2">
                    <h2>Notes</h2>

                <iframe width="560" height="315" src="http://www.youtube.com/embed/cJLzekuukEE"
                frameborder="0" allowfullscreen></iframe>
            </div>
            <div id="tabs-3">
                    <h2>Diary</h2>

                <iframe width="560" height="315" src="http://www.youtube.com/embed/rtfS2eFwdgw"
                frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        <div id="tabs-4">
                <h2>Other 4</h2>

            <iframe width="560" height="315" src="http://www.youtube.com/embed/cJLzekuukEE"
            frameborder="0" allowfullscreen></iframe>
        </div>
        <div id="tabs-5">
                <h2>Other 5</h2>

            <iframe width="560" height="315" src="http://www.youtube.com/embed/cJLzekuukEE"
            frameborder="0" allowfullscreen></iframe>
        </div>
        <div id="tabs-6">
                <h2>Other 6</h2>

            <iframe width="560" height="315" src="http://www.youtube.com/embed/rtfS2eFwdgw"
            frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

如果我的问题出错,请纠正我