使用jQuery锚定到多个位置 [英] Anchor Link to Multiple Locations using jQuery
问题描述
我目前正在使用这段代码:
I'm currently working with this piece of code:
小提琴: http://jsfiddle.net/2hmzcgqm/12/
现在,我可以将#rugby
用作手风琴中的某个span
.
Right now I can use #rugby
to be taken to a certain span
within the Accordion.
我希望能够将此扩展为也使用#football
.有人可以帮忙吗? :-)
I'd like to be able to extend this to use #football
also. Can someone help? :-)
Javascript:
(function($) {
var allPanels = $('.accordion > dd').hide();
var allLinks = $('a.heading');
$('.accordion > dt > a').click(function() {
allPanels.slideUp();
//Remove all
allLinks.removeClass('active');
if ($(this).parent().next().is(":visible")) return false;
$(this).parent().next().slideDown();
//Add active class
$(this).addClass('active');
return false;
});
//$('.accordion > dt > a').first().trigger('click');
function setAccordion() {
// Get id from url
// var url = window.location.pathname;
// Test url
var url = 'localhost:58000/gallery#rugby';
var id = url.substring(url.lastIndexOf('#')); // This will give you #football
var spanTag = $('.accordion').find(id); //#football span tag
var parentTag = spanTag.closest('dd');
//open the accordion
allPanels.slideUp();
parentTag.slideDown();
parentTag.prev('dt').find('a.heading').addClass('active');
}
// Call the function
setAccordion();
})(jQuery);
推荐答案
首先,我们无法为您编写完整的代码,这不是Stackoverflow的重点. 但是,我们可以帮助您进行正确的搜索.
First of all we can't write full code for you, that's not the point of Stackoverflow. However we can help you out to search in the right direction.
如果您要在网址中定义多个元素,则可以看到以下示例 jQuery从url读取多个数组参数
If you want multiple elements to define in your url you can see the following example Jquery reading several array parameters from url
然后从URL中捕获参数,并创建一个数组,然后进行迭代以打开或设置正确的手风琴项.
Then catch the params from the url and create an array which you then iterate over to open or set the correct accordion item.
var arrayParams = [];
$.each(arrayParams, function(key, value) {
// Get every item from the url and open the correct accordion item
});
这篇关于使用jQuery锚定到多个位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!