使用手风琴和标签

Question

这个问题以前有人问过，但没有解决。

我正在使用 jquery 选项卡和手风琴，两者都在同一页面上，但它们不能一起使用。它们在单独的页面上分开工作，但一旦它们在同一页面上，这些选项卡将无法工作。事实上，当我重新加载页面时，它会在哪个有效和无效之间随机翻转。我希望使用 jquery.

在选项卡中嵌套手风琴

重新排序 js 加载顺序似乎没有帮助，因为有些人运气好，尽管我的直觉是加载顺序问题。

这里是 html:

<div id="styleguide-tabs-demo-regular">
<ul>
<li><a href="#tabs-1">Tab One</a></li>
<li><a href="#tabs-2">Tab Two</a></li>
<li><a href="#tabs-3">Tab Three</a></li>
</ul>
<div id="tabs-1">Tab 1 content</div>
<div id="tabs-2">Tab 2 content</div>
<div id="tabs-3">Tab 3 content</div>
</div>
<p><br /><br /><br /><br /></p>
<div class="styleguide_demo_accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<div class="styleguide-section__accordion-demo-element">Content for Section 1</div>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<div class="styleguide-section__accordion-demo-element">Content for Section 2</div>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<div class="styleguide-section__accordion-demo-element">Content for Section 3</div>
</div>
</div>
<p>&nbsp;</p>

jquery:

$("div.styleguide_demo_accordion1").accordion({header: "h2", collapsible: true, heightStyle: "content", active: false}) 

$("div#customaccordion").accordion({header: "h2", collapsible: true, heightStyle: "content", active: false}) 

$(function() {
    $( "#tabs" ).tabs();
  });

$("div#styleguide-tabs-demo-regular").tabs();

任何帮助都会很棒！

Answer 1

我试过你的代码，创建了一个 JSFiddle，我只需要改变这一行：

$("div.styleguide_demo_accordion1").accordion({header: "h2", collapsible: true, heightStyle: "content", active: false})

至

$("div.styleguide_demo_accordion1").accordion({header: "h3", collapsible: true, heightStyle: "content", active: false})

所以基本上，在将 header 选项从 h2 更改为 h3 后，它似乎按预期工作。有没有可能你刚刚打错了？

Answer 2

没什么奇怪的。 HTML中有<h3>，而JS
中有header: "h2" 把所有的<h3>改成<h2>或者把header: "h2"改成header: "h3"就OK了

使用手风琴和标签

Using Accordions and Tabs

html

javascript

jquery

tabs

accordion