使用手风琴和标签

时间:2015-04-29 13:04:45

标签: javascript jquery html tabs accordion

之前已经问过这个问题,但没有解决。

我在同一页面上使用jquery Tabs和Accordion,他们很简单,不会一起工作。 它们在单独的页面上分开工作,但只要它们在同一页面上,标签就不会起作用。 事实上,当我重新加载页面时,它会随机翻转哪一个有效,哪一个无效。我希望使用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();

任何帮助都会很棒!

2 个答案:

答案 0 :(得分:2)

我尝试了你的代码,创建了一个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后,它似乎按预期工作。您是否可能只是输入错误?

答案 1 :(得分:1)

没什么奇怪的。 HTML中有<h3>,而JS中有header: "h2" 将所有<h3>更改为<h2>header: "h2"更改为header: "h3",这样就可以了