Javascript jQuery Accordion - 在页面加载上打开特定部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2199716/
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 - open specific section on pageload
提问by Bomski
I have a rather basic implementation of a jQuery Accordion on a page (using 1.3.2, jQuery UI Core 1.72 and jQuery UI Accordion 1.7.2), and I wish to open the 2nd section when the page loads. i've tried numerous methods but nothing seems to work...
我在页面上有一个相当基本的 jQuery Accordion 实现（使用 1.3.2、jQuery UI Core 1.72 和 jQuery UI Accordion 1.7.2），我希望在页面加载时打开第二部分。我尝试了很多方法，但似乎没有任何效果......
HEAD SCRIPT:
头脚本：
<script type="text/javascript"> $(function() {
$("#accordion").accordion({
event: "mouseover"
});
});
BODY ACCORDION:
琴体手风琴：
<div id="accordion">
<h3><a href="#">Headline 001</a></h3>
<div>
<ul>
<li><a href="#1">Link 001</a></li>
<li><a href="#2">Link 002</a></li>
</ul>
</div>
<h3><a href="#">Headline 002</a></h3>
<div>
<ul>
<li><a href="#3">Link 003</a></li>
<li><a href="#4">Link 004</a></li>
</ul>
</div>
Any help would be greatly appreciated!
任何帮助将不胜感激！
回答by Ed James
$("#accordion").accordion({ active: 2, event: "mouseover" });
Should do the trick!
应该做的伎俩！
UPDATE
更新
if that doesn't work, try
如果这不起作用，请尝试
$("#accordion").accordion({ event: "mouseover" }).activate(2);
(N.B. this is updated to be a bit faster, thanks for the comments. To be honest, it should work with the 'active: 2' parameter, don't know why it didn't.)
（注意，更新速度更快，感谢您的评论。老实说，它应该与 'active: 2' 参数一起使用，不知道为什么没有。）
回答by Martijn van Hoof
proper way to open a specific tab:
打开特定选项卡的正确方法：
$("#accordion").accordion({
collapsible : true,
active : false,
heightStyle : "content",
navigation : true
});
Set the option:
设置选项：
//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");
$("#accordion").accordion('option', 'active' , 1);
or you could work with a hash like this:
或者你可以使用这样的哈希：
if(location.hash){
var tabIndex = parseInt(window.location.hash.substring(1));
$("#accordion").accordion('option', 'active' , tabIndex);
}
Vote if you use ;)
如果您使用，请投票;)
Thanks
谢谢
回答by Adhip Gupta
Does the following work?
以下是否有效？
$(function() {
$("#accordion").accordion({
event: "mouseover",
collapsible: true,
active: 2
});
});
回答by Darmen Amanbayev
Try
尝试
$("#accordion").activate(index);
回答by benqus
I have resolved this question a little different since I had to create a menu.php which we include I have included every single page. In our project there was 1 accordion (a menu element with 2 submenus). So when the visitor is on the submenus, the accordion is open and the selected link (which are highlighted using CSS, not jQuery) active. But when the visitor is on a different page, the accordion works normally.
我已经解决了这个问题，因为我必须创建一个 menu.php，我们已经包含了每个页面。在我们的项目中有 1 个手风琴（一个带有 2 个子菜单的菜单元素）。因此，当访问者在子菜单上时，手风琴会打开并且选定的链接（使用 CSS 而不是 jQuery 突出显示）处于活动状态。但是当访问者在不同的页面上时，手风琴正常工作。
Here's the javascript:
这是javascript：
var containsParams = /teacher|student/i.test(window.location.href), //regexp with string params
accordion = $("li.accordion"); // the accordion as a global
accordion.accordion({ //accordion setup on every page
animated : !containsParams,
active : containsParams,
collapsible : true,
event : "click",
header : "h2"
});
//I like to use "self calling methods" since many times I need a main onload event and this way it's clear for every page and my main function still remains
(function () {
if (containsParams) accordion.accordion("activate", 0);
})();
Hope you like it. =]
希望你喜欢。=]
Best regards! =]
此致！=]
回答by swilgosz
You should write active: 1instead of 2, because Accordion indexes sections from 0, not from one. Working code will look like that:
你应该写active: 1而不是 2，因为 Accordion 从 0 开始索引部分，而不是从 1 开始。工作代码如下所示：
$("#accordion").accordion({ active: 1, event: "mouseover" });
Hope it will help a bit.
希望它会有所帮助。
回答by THOMAS MANN
As others have mentioned, the following will make it active on opening:
正如其他人所提到的，以下内容将使其在打开时处于活动状态：
$("#accordion").accordion({ active: 1 });
It is active:1since it is the 2nd of the accordion's index {0,1,2,...};There seems to be some confusion in other answers as the element's contents contain the character "2"...
这是active:1因为它是手风琴索引的第二个{0,1,2,...};其他答案似乎有些混乱，因为元素的内容包含字符“ 2”...
