在jquery选项卡中激活jquery手风琴
在jquery选项卡中激活jquery手风琴
提问于 2016-12-29 19:03:51
我使用jquery选项卡插件来生成几个选项卡的元素。每个选项卡都有一个手风琴(jquery手风琴插件)。
<div id="tabs" class="faq-tabs">
<ul>
<li><a href="#tabs-1">1</a></li>
<li><a href="#tabs-2">2</a></li>
</ul>
<div id="tabs-1">
<div id="accordion-1" class="accordion a-faq">
<h3>Title 1</h3>
<div>Block1</div>
<h3>Titl2</h3>
<div>Block2</div>
</div>
</div>
<div id="tabs-2">
<div id="accordion-2" class="accordion a-faq">
<h3>Title 1</h3>
<div>Block1</div>
<h3>Titl2</h3>
<div>Block2</div>
</div>
</div>
在js代码中，我以这种方式激活选项卡和手风琴插件：
$(function() {
$( "#tabs" ).tabs();
$( "#accordion-1,#accordion-2" ).accordion();
});问题是#第二个标签上的手风琴-2不起作用。看来用于绑定手风琴插件的js代码是不正确的。
有什么建议吗？谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-29 19:07:25
下面是一个基于您的代码的工作示例。
检查您是否在控制台中看到任何javascript错误，因为它应该正常工作。
$(function() {
$( "#accordion-1,#accordion-2" ).accordion();
$( "#tabs" ).tabs();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="tabs" class="faq-tabs">
<ul>
<li><a href="#tabs-1">1</a></li>
<li><a href="#tabs-2">2</a></li>
</ul>
<div id="tabs-1">
<div id="accordion-1" class="accordion a-faq">
<h3>accordion-1 Title 1</h3>
<div>Block1</div>
<h3>accordion-1 Titl2</h3>
<div>Block2</div>
</div>
</div>
<div id="tabs-2">
<div id="accordion-2" class="accordion a-faq">
<h3>accordion-2 Title 1</h3>
<div>Block1</div>
<h3>accordion-2 Titl2</h3>
<div>Block2</div>
</div>
</div>
</div>
更新
要确保内部手风琴在不同的选项卡中工作，您首先需要确保插入.accordion()，然后才能输入.tabs()。
$( "#accordion-1,#accordion-2" ).accordion();
$( "#tabs" ).tabs();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41385756
复制相关文章
相似问题
腾讯云开发者
