选项卡式导航中的手风琴

Question

选项卡式导航中的手风琴

Jd_*_*els 5 tabs jquery-ui accordion jquery-ui-accordion

我正在创建一个带有多个标签的简单页面,每个标签内部将有3个部分,我正在使用手风琴,因为这是我想要的最佳解决方案.一切都在第一个标签上完美运行,手风琴按照应有的方式运行,内容也很好.

当我单击tab2时,内容将呈现为仅应用了手风琴的文本.我已经使用了开发工具,并且由于某些原因,手风琴类没有应用于tab2中的accordion div.可能我错过了一些非常基本的东西,但我会感激任何帮助.

请原谅这里的基本代码布局,但为了演示目的,这就是html的外观.

<body>
<h1 class="mainTitle">Page Title</h1>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">TAB 1</a></li>
        <li><a href="#tabs-2">TAB 2</a></li>
    </ul>
<div id="tabs-1"><!-- Start of tabs-1 -->
    <div id="accordion">
        <h3>Section 1</h3>
        <div>
        This section is for general information relating to this project.
        </div>
        <h3>Section 2</h3>
        <div>
        Section 1 content
        </div>
        <h3>Section 2</h3>
        <div>
        Section 2 content
        </div>
    </div><!-- End of accordion -->
</div><!-- End of tabs-1 -->

<div id="tabs-2"><!-- Start of tabs-2 -->
    <div id="accordion">
        <h3>Section 1</h3>
        <div>
        This section is for general information relating to this project.
        </div>
        <h3>Section 2</h3>
        <div>
        Section 1 content
        </div>
        <h3>Section 2</h3>
        <div>
        Section 2 content
        </div>
    </div><!-- End of accordion -->
</div><!-- End of tabs-2 -->
</div><!-- End of tabs -->
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Chi*_*res 2

您有多个具有相同 id 的 div，即 Accordion。要么单独命名它们，要么在选择器中使用一个类。例如：

<body>
<h1 class="mainTitle">Page Title</h1>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">TAB 1</a></li>
         <li><a href="#tabs-2">TAB 2</a></li>
    </ul>
<div id="tabs-1">
   <div class="accordion">
       <h3>Section 1</h3>
        <div>
        This section is for general information relating to this project.
        </div>
        <h3>Section 2</h3>
        <div>
        Section 1 content
        </div>
        <h3>Section 2</h3>
        <div>
        Section 2 content
        </div>
    </div><!-- End of accordion -->
</div><!-- End of tabs-1 -->

<div id="tabs-2"><!-- Start of tabs-2 -->
    <div class="accordion">
        <h3>Section 1</h3>
        <div>
        This section is for general information relating to this project.
        </div>
        <h3>Section 2</h3>
        <div>
        Section 1 content
        </div>
        <h3>Section 2</h3>
        <div>
        Section 2 content
        </div>
    </div><!-- End of accordion -->
</div><!-- End of tabs-2 -->
</div><!-- End of tabs -->
</body>

Run Code Online (Sandbox Code Playgroud)

进而：

$( ".accordion" ).accordion();

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，7 月前
查看次数：	1034 次
最近记录：	11 年，7 月前