jQuery Accordion - 打开页面加载的特定部分

发布于 2024-08-20 02:20:54 字数 898 浏览 6 评论 0原文

我在页面上有一个相当基本的 jQuery Accordion 实现（使用 1.3.2、jQuery UI Core 1.72 和 jQuery UI Accordion 1.7.2），我希望在页面加载时打开第二部分。我尝试了很多方法，但似乎没有任何效果......

头脚本：

<script type="text/javascript"> $(function() {
    $("#accordion").accordion({
        event: "mouseover"
    });

});

身体手风琴：

<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>

任何帮助将不胜感激！

原文

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...

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长途伴 2024-08-27 02:20:54

$("#accordion").accordion({ active: 2, event: "mouseover" });

应该做的伎俩！

更新

如果这不起作用，请尝试

$("#accordion").accordion({  event: "mouseover" }).activate(2);

（注意，这更新得更快一点，感谢您的评论。说实话，它应该与“active：2”参数一起使用，不要“不知道为什么没有。）

$("#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.)

回复收藏 0 原文

凉城凉梦凉人心 2024-08-27 02:20:54

打开特定选项卡的正确方法：

$("#accordion").accordion({
    collapsible  : true,
    active       : false,
    heightStyle  : "content",
    navigation   : true
});

设置选项：

//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");
$("#accordion").accordion('option', 'active' , 1);

或者您可以使用这样的哈希：

if(location.hash){

    var tabIndex = parseInt(window.location.hash.substring(1));     
    $("#accordion").accordion('option', 'active' , tabIndex);

}

如果您使用，请投票；）

谢谢

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

回复收藏 0 原文

夜吻♂芭芘 2024-08-27 02:20:54

下面的方法有效吗？

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: 2
    });

});

Does the following work?

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: 2
    });

});

回复收藏 0 原文

自由如风 2024-08-27 02:20:54

尝试

$("#accordion").activate(index);

Try

$("#accordion").activate(index);

回复收藏 0 原文

绅刃 2024-08-27 02:20:54

我已经用稍微不同的方式解决了这个问题，因为我必须创建一个我们包含的menu.php，我已经包含了每个页面。在我们的项目中，有 1 个手风琴（带有 2 个子菜单的菜单元素）。因此，当访问者位于子菜单上时，手风琴会打开，并且所选链接（使用 CSS 而不是 jQuery 突出显示）处于活动状态。但是当访问者位于不同的页面时，手风琴可以正常工作。

这是 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);
})();

希望您喜欢它。 =]

最好的问候！ =]

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.

Here's the 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! =]

回复收藏 0 原文

浅紫色的梦幻 2024-08-27 02:20:54

您应该编写 active: 1 而不是 2，因为 Accordion 从 0 开始索引节，而不是从 1 开始。工作代码看起来像这样：

$("#accordion").accordion({ active: 1, event: "mouseover" });

希望它会有所帮助。

You should write active: 1 instead of 2, because Accordion indexes sections from 0, not from one. Working code will look like that:

$("#accordion").accordion({ active: 1, event: "mouseover" });

Hope it will help a bit.

回复收藏 0 原文

苦笑流年记忆 2024-08-27 02:20:54

正如其他人提到的，以下内容将使其在打开时处于活动状态：

$("#accordion").accordion({ active: 1 });

它是 active:1 因为它是手风琴索引 {0,1,2,...} 的第二个； 其他答案中似乎存在一些混乱，因为元素的内容包含字符“2”...

As others have mentioned, the following will make it active on opening:

$("#accordion").accordion({ active: 1 });

It is active:1 since 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"...

回复收藏 0 原文

~没有更多了~