如何使用事件和 jquery 将一个网页链接到另一个具有手风琴页面的网页
我有一个索引页面,我想链接到一个案例研究页面(html),该页面有一个由事件触发器驱动的手风琴 jquery 菜单导航栏。
我如何从索引页面链接这些内容,以便当用户单击它时,您将进入案例研究页面,打开手风琴 jquery 部分中的相关页面。
我尝试在索引页上使用此代码,但这不起作用。
a href="church-clock-case-studies.html" onClick="$('#test3Handle0').click()">林登·霍尔
I have a index page where I want to link to a case studies pages (html) which has an accordion jquery menu nav bar driven by event triggers.
How do I link these from the index page so that when a user clicks on it will take you to the case studies page opening the relevant page in the accordion jquery section.
I have tried using this code, on the index page but this does not work.
a href="church-clock-case-studies.html" onClick="$('#test3Handle0').click()">Lyndon Hall
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您需要将参数传递给目标页面。最简单的方法是使用哈希,即使您的 href 指向
church-clock-case-studies.html#yourpage
。在 Church-clock-case-studies.html 中,您将使用
location.hash
设置手风琴的默认页面。有关如何设置默认折叠面板页面的说明,请查看 jQuery UI 折叠面板帮助。You will need to pass an argument to the target page. The easiest way to do so would be using the hash, i.e. make your href point to
church-clock-case-studies.html#yourpage
.In church-clock-case-studies.html you'll then use
location.hash
to set the default page of the accordion. For instructions on how to set the default accordion page, have a look at the jQuery UI Accordion help.正如 ThiefMaster 已经说过的,您需要以某种方式在手风琴中传递您想要的活动部分的名称。正如 ThiefMaster 还建议的那样,最简单的方法是使用哈希,如“#argumentToBePassed”中所示,它应该适用于您的情况。
基本上,您需要一个可以根据提供的输入识别活动状态的手风琴;在这种情况下,输入是通过 URL 哈希提供的。
有关此方法(以及更多)的详细演练,您可能需要查看 http://www .michaeljacobdavis.com/tutorials/state savingaccordion.html 我发现这非常有帮助。
您需要执行以下操作:
假设您在 JQuery UI 中使用 Accordion 小部件,请在对 Accordion() 的调用中将“navigation”参数设置为“true”,如下所示;
$("#yourAccordion").accordion({navigation:true});//初始化手风琴时
或
$("#yourAccordion").accordion("option", "navigation" ,true);//稍后在脚本中设置
假设您希望主页上的link3在手风琴中打开#section3,请在目标页面上标记section3“容器元素”(church-clock) -case-studies.html),id=“section3”。另外,将手风琴中的标题链接指向“#section3”。
使主页上的 link3 指向 Church-clock-case-studies.html#section3 。
这应该适合你。虽然,我已经在不同的场景中测试了它,我需要在使用相同的手风琴加载另一个页面时保留当前打开的手风琴部分的状态,并使手风琴部分的状态“可书签”(后者是您想要的) , 我认为)。希望有帮助。 :)
As ThiefMaster already said, you need to pass the name of the active section you want in your accordion somehow. The easiest way to do it, as ThiefMaster also suggested, would be using a hash, as in "#argumentToBePassed" which should work in your case.
Basically you need an accordion which can identify an active state based on input provided; in this case the input is provided through the URL hash.
For a detailed walkthrough of this method (and more), you might want to check out http://www.michaeljacobdavis.com/tutorials/statesavingaccordion.html which I found very helpful.
You need to do this:
Assuming you are using the accordion widget in JQuery UI, set the "navigation" parameter to "true" in your call to accordion() like so;
$("#yourAccordion").accordion({navigation:true});//while initializing accordion
or
$("#yourAccordion").accordion("option", "navigation" ,true);//set it later in the script
Say, you want link3 on homepage to open #section3 in your accordion, mark up the section3 "container element" on the target page(church-clock-case-studies.html) with id="section3". Also, point your header link in your accordion to "#section3".
Make your link3 on homepage point to church-clock-case-studies.html#section3 .
That should do it for you. Although, I have tested it in a different scenario where I need to preserve the state of currently open section of accordion on loading another page with the same accordion, and make the accordion sections' states "bookmark-able" (latter is what you want, I think). Hope that helps. :)