如何从不同页面链接到特定的手风琴部分?

发布于 2024-11-07 15:49:10 字数 1219 浏览 4 评论 0原文

我已经使用 Soh Tanaka 的 简单手风琴成功构建了 JQuery 手风琴教程。我希望能够从另一个页面链接到特定的手风琴部分,但我不知道如何做到这一点。任何帮助将不胜感激,因为我没有太多运气找到针对本教程的任何帮助。谢谢!

HTML:

<h2 class="acc_trigger"><a href="#">Web Design &amp; Development</a></h2>
<div class="acc_container">
<div class="block">
<!--Content Goes Here-->
</div>
</div>

JQuery:

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
    $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
    $(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

I have successfully built a JQuery accordion using Soh Tanaka's Simple Accordion tutorial. I would like to be able to link to a specific accordion section from another page but I'm not sure how to do this. Any help would be greatly appreciated as I haven't had much luck finding any help specific to this tutorial. Thanks!

HTML:

<h2 class="acc_trigger"><a href="#">Web Design & Development</a></h2>
<div class="acc_container">
<div class="block">
<!--Content Goes Here-->
</div>
</div>

JQuery:

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
    $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
    $(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

南城旧梦 2024-11-14 15:49:10

您确实应该使用 JQuery UI Accordion。然后,如果您想要的是能够通过脚本选择某个手风琴部分,您可以使用以下代码:

    $('#myAccordion').accordion("option", "active", 0)

使用此代码,一旦您创建了基于 id 为“myAccordion”的标签构建的手风琴元素,您就可以选择第一页(即,索引为 0)。要选择第二页,您可以传递 1 作为最后一个参数,依此类推。

You should really use JQuery UI accordion. Then if what you want is to be able to select a certain accordion section by script you can use the following:

    $('#myAccordion').accordion("option", "active", 0)

With this code, once you have created an accordion element built on a tag with id "myAccordion", you select the first page (namely, indexed with 0). To select the second page you can pass 1 for the last parameter and so on.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文