之前已经问过这个问题,但没有解决。
我在同一页面上使用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> </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();
任何帮助都会很棒!
答案 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"
,这样就可以了