Javascript 从另一个页面链接到手风琴的一部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12008389/
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
Linking to a section of an Accordion from another page
提问by Maverick Jones
I'm using twitter-Bootstrap 2.04, and I'm using the latest jQuery. I'm trying to make a link that will go from one page to the page containing this accordion, and then activate the appropriate accordion section. This is the accordion:
我使用的是 twitter-Bootstrap 2.04，我使用的是最新的 jQuery。我正在尝试创建一个链接，该链接将从一页转到包含此手风琴的页面，然后激活相应的手风琴部分。这是手风琴：
<div class="accordion-group">
<div class="accordion-heading">
<a name="Alink1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<strong>Title</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body in collapse" style="height: auto; ">
<div class="accordion-inner">
some random content
<div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a name="Alink2" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<strong>Title 2</strong>
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
some random content 2
<div>
</div>
</div>
This is the link:
这是链接：
<a href="page.html/#Alink2">Link to some interesting stuff</a>
With linking to just a bit in the page works fine usually, do I need to use Javascript to activate it?
链接到页面中的一点点通常可以正常工作，我是否需要使用 Javascript 来激活它？
回答by merv
Yes, you will need to manually activate it on page load. Something like the following should work:
是的，您需要在页面加载时手动激活它。像下面这样的东西应该工作：
$(document).ready(function () {
location.hash && $(location.hash + '.collapse').collapse('show');
});
Also, as @SaadImran pointed out, this assumes that you link to the collapsible element id (eg., #collapseTwo) rather than the name in the anchor (eg., #Alink2).
此外，正如@SaadImran 指出的那样，这假设您链接到可折叠元素 ID（例如，#collapseTwo）而不是锚中的名称（例如，#Alink2）。
回答by mikeyarce
Thanks for your help.
I added functionality so that the code can open Accordions WITHIN Accordions:
谢谢你的帮助。
我添加了功能，以便代码可以打开 Accordions WITHIN Accordions：
$(document).ready(function () {
if (location.hash){
$(location.hash).collapse('show');
$(location.hash).parents('.accordion-body').collapse('show');
}
});
回答by Christian Michael
You can use the position of the accordion section. The following link opens the third accordion section on a twitter bootstrap (wordpress) accordion.
您可以使用手风琴部分的位置。以下链接可打开 twitter bootstrap (wordpress) 手风琴上的第三个手风琴部分。
Link Example: http://www.zfp-bauwesen.de/leistungen/ubersicht#3
链接示例：http: //www.zfp-bauwesen.de/leistungen/ubersicht#3
Javscript Code:
文字代码：
$( document ).ready(function() {
if (window.location.hash) {
var AccordionSectionNumber = window.location.hash.substring(1);
AccordionBodyID = $(".accordion .accordion-group:nth-of-type(" + AccordionSectionNumber + ") .accordion-heading a").attr('href')
if (! (typeof AccordionBodyID === "undefined")) {
$(AccordionBodyID).collapse('show');
return true;
}
}
});
回答by aliirz
Have you tried this:
你有没有试过这个：
<a href="page.html#Alink2">Link to some interesting stuff</a>
