jquery Accordion - 如何在页面加载时默认打开第二个选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18913035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery Accordion - how to open the second tab by default on page loading
提问by Hymanpot
i'm an absolute noob to jquery and javascript, and really i'm just using a simple code i've found online. This creates an accordion list, but I would like to open the second tab (or any tab other than the first) on page loading. Then, when clicking on any other tab, the tab opened by default should be closed.
我是 jquery 和 javascript 的绝对菜鸟，实际上我只是在使用我在网上找到的简单代码。这会创建一个手风琴列表，但我想在页面加载时打开第二个选项卡（或第一个以外的任何选项卡）。然后，当单击任何其他选项卡时，应关闭默认打开的选项卡。
This is the code i'm using:
这是我正在使用的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<style>
.accord-content { display: none; }
</style>
</head>
<body>
<div class="accordion">
<div class="accord-header">Header 1</div>
<div class="accord-content">This is the content for the first header.</div>
<div class="accord-header">Header 2</div>
<div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".accordion .accord-header").click(function() {
if($(this).next("div").is(":visible")){
$(this).next("div").slideUp("slow");
} else {
$(".accordion .accord-content").slideUp("slow");
$(this).next("div").slideToggle("slow");
}
});
});
</script>
</html>
How can I achieve this? The simplest, the better.
我怎样才能做到这一点？越简单越好。
Thanks yo everyone in advance.
提前谢谢大家。
回答by surfer190
A more elegant way:
更优雅的方式：
$( ".selector" ).accordion({ active: 1 });
Keep in mind that the active property is zero-indexed. 0 represents the first tab. 1 represents the second.
请记住，活动属性是零索引的。0 代表第一个选项卡。1代表第二个。
回答by Guillaume Lehezee
You can use the .trigger()to simulate a click on the desired tab. This is a working fiddle.
您可以使用.trigger()模拟单击所需选项卡。这是一个工作小提琴。
On your jquery, before the end of the document.ready :
在您的 jquery 上，在 document.ready 结束之前：
$(".accordion .accord-header:eq(1)").trigger('click');
So your final JS :
所以你的最终 JS ：
$(document).ready(function() {
$(".accordion .accord-header").click(function() {
if($(this).next("div").is(":visible")){
$(this).next("div").slideUp("slow");
} else {
$(".accordion .accord-content").slideUp("slow");
$(this).next("div").slideToggle("slow");
}
});
$(".accordion .accord-header:eq(1)").trigger('click');
});
