Question

我有一个简单的网站，其中每个“网页”实际上是section。使用position:absolute和z-index将这些部分叠加在一起。单击导航项时，id为与导航项的类名匹配的部分将提升到堆栈顶部，从而更改“页面”。

现在让我感到困惑的是，如何从另一部分的内容中的链接中确定如何定位特定部分。我知道我要做的事情的要点，但是就执行而言，我已经迷失了。

我认为它需要走的是：

$('section a[href^=#]').click(function(){
                var target = $(this).attr(href).(strip the hashtag from the beginning of the link and output the resulting value);
$('body').find('section[id='+target+']').addClass('active').css('z-index', '2')
$('body').find('section[id!='+target+']').removeClass('active').css('z-index', '1')
                });

我想这会涉及RegEx某种程度，我对此一无所知。有什么想法吗？

Answer 1

不需要regexen：链接的底层DOM对象公开Location interface，这使您可以直接访问URL的各个部分，这些部分由浏览器本身进行最终解析。 hash属性保存锚点部分，包括前导#，因此将一个字符切掉：

this.hash.slice(1);

甚至，因为您可以将#重用于ID选择器：

$(this.hash).addClass...

Answer 2

不需要正则表达式简单拆分就可以处理它

var id = "";
var ar = $(this).attr('href').toString().split('#');
if(ar.length>0)
   id = ar[1];
if(id.length > 0)

//你的逻辑在这里，不要忘记在你的逻辑中返回false，否则它将继续执行

点击链接

$(this)

Answer 3

这比其他答案容易一点，假设你的hrefs看起来像#section_id var target = $(this).attr(href).substring(1);

实际上这是另一种解决方案。由于#是jquery id选择器，因此您甚至不需要对字符串进行任何处理。你也可以这样做

var section_id = $(this).attr('href');
$('.section').removeClass('active').css('z-index', '1'); //set all sections to z-index 1
$(section_id).addClass('active').css('z-index', '2'); //set the section you want to z-index 2

使用URL的href值定位div

3 个答案: