jQuery连接手风琴和标签

Question

我会将手风琴与类似于jQuery的官方演示here的标签连接起来，但是使用手风琴代替列表......这可能吗？有人能为我提供一个有效的例子吗？

Answer 1

有一个Accordion | jQuery UI演示。

如果使用

，您应该能够将标签与手风琴组合在一起

$(function() {
   $( "#tabs" ).tabs();
   $( "#accordion-1" ).accordion();
   $( "#accordion-2" ).accordion();
});

和像这样的HTML结构

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <div id="accordion-1">
            <h3>Section 1</h3>
            <div>
                <p>
                Tab 1 - Section 1
                </p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>
                Tab 1 - Section 2
                </p>
            </div>
        </div>
    </div>
    <div id="tabs-2">
        <div id="accordion-2">
            <h3>Section 1</h3>
            <div>
                <p>
                Tab 2 - Section 1
                </p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>
                Tab 2 - Section 2
                </p>
            </div>
        </div>
    </div>
</div>