Question

我正在创建一个带有多个标签的简单页面，在每个标签内部将有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>

Answer 1

你有多个具有相同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>

然后：

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

Answer 2

您有两个<div>具有相同ID（“手风琴”）。我建议将它们改为使用“手风琴”而不是ID，然后更改你的jQuery以将手风琴效果应用到<div.accordion>。

选项卡式导航中的手风琴

2 个答案: