[英]Link to section within Accordion using jQuery
I have 2 pages. 我有2页。 page1.html
contains a series of links & page2.html
has an Accordion. page1.html
包含一系列链接, page2.html
具有手风琴。
My Question: Is it possible to link directly to a section in the Accordion? 我的问题:是否可以直接链接到手风琴中的某个部分? So, if I wanted to visit 'Celtic', how do I create a link that a) opens correct Accordion tab b) anchors down to celtic id. 因此,如果我想访问'Celtic',我该如何创建一个链接,以便a)打开正确的“手风琴”选项卡b)锚定到celtic id。
Here's my current code for page2.html
: http://jsfiddle.net/7k9s1pg7/ 这是我当前的page2.html
代码: http : //jsfiddle.net/7k9s1pg7/
HTML: HTML:
<dl class="accordion">
<dt><a href="" class="container heading">Soccer</a></dt>
<dd id="soccer">
<div id="manutd">
<p>Man Utd</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="celtic">
<p>Celtic</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</dd>
<dt><a href="" class="container heading">Formula 1</a></dt>
<dd id="formula1">
<div id="lewishamilton">
<p>Lewis Hamilton</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="michaelschumacher">
<p>Michael Schumacher</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</dd>
</dl>
Javascript: Javascript:
(function($) {
var allPanels = $('.accordion > dd').hide();
var allLinks = $('a.heading');
$('.accordion > dt > a').click(function() {
allPanels.slideUp();
allLinks.removeClass('active');
if ($(this).parent().next().is(":visible")) return false;
$(this).parent().next().slideDown();
$(this).addClass('active');
return false;
});
})(jQuery);
Use anchors in page1
links: page2.html#lewishamilton
and add to your JS code 在第1 page1
链接中使用定位page2.html#lewishamilton
: page2.html#lewishamilton
并添加到您的JS代码中
var hash = location.hash;
if (hash) {
var el = $(hash);
el.parent().slideDown();
el.parent().prev().find('a').addClass('active');
}
http://jsfiddle.net/7k9s1pg7/2/ http://jsfiddle.net/7k9s1pg7/2/
I faced a same problem recently. 我最近遇到了同样的问题。 I fixed it by setting up the RewriteRule in .htaccess instead of playing with the frontend code. 我通过在.htaccess中设置RewriteRule而不是使用前端代码来修复它。
I did this because my requirement was to have a user-friendly URL for a better UX. 我这样做是因为我的要求是拥有一个用户友好的URL,以获得更好的UX。 The other option is to go for #
( location.hash
). 另一个选择是使用#
( location.hash
)。
See this question and answer . 请参阅此问题和答案 。
My idea was to hit a URL that looks user-friendly. 我的想法是点击一个看起来用户友好的URL。 Something like: 就像是:
http://www.example.com/somepage/something http://www.example.com/somepage/something
Where somepage
is the page with the accordian and something
is the ID of the button inside a section of the accordian. 其中somepage
是带有somepage
的页面,而something
是风琴的一部分内的按钮的ID。
In somepage
, you will need to write code to read the something
from the URL on onload
by using window.location.pathname
and then programatically click the something
button. 在somepage
,你需要编写代码来读something
从网址上onload
使用window.location.pathname
然后编程点击something
按钮。
Note that this fixes your accordian problem and also gives a good UX by rendering a user-friendly URL. 请注意,这可以解决您的手风琴问题,还可以通过呈现用户友好的URL来提供良好的用户体验。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.