使用URL的href值的目标div

问题描述：

我有一个简单的网站，其中每个“页面”实际上是一个section。这些部分使用position:absolute和z-index分层堆叠在一起;当点击导航项目时，具有与导航项目的类名相匹配的id的部分被提升到堆栈的顶部，从而改变“页面”。使用URL的href值的目标div

现在有什么让我卡住，但是，正在弄清楚如何从另一节内容中的链接定位特定节。我知道我必须做的事情的要点，但就执行情况而言，我已经迷失了方向。

我如何想象它需要去是这样的：

$('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') 
       });

我想这涉及到正则表达式不知怎么的，我一无所知。有什么想法吗？

答

无需使用regexen：为链接的基础DOM对象公开Location interface，它给你的网址的浏览器本身明确解析的部分直接访问。该hash属性保存的是锚部分，包括领先的#，所以切片一个字符关：

this.hash.slice(1);

甚至，因为你可以为一个ID选择重用#：

$(this.hash).addClass...

太棒了，谢谢！我不知道你可以像你在第二个例子中那样从'this'中提取数据。我对Jquery仍然很陌生，所以当我走的时候，我一直在困惑这一切。 –

@art：的确，这不是jQuery功能，它是底层浏览器DOM的一部分。有些东西是Plain Old DOM所做的，jQuery并没有真正帮助你，因此很好地了解这两者。 – bobince

答

不需要正则表达式的简单拆分可以

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

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

$(this)是点击链接

谢谢！因为简单一点，我最终选择了bobince的解决方案。 –

答

这是比其他的答案更容易一点，假设你的HREF看起来都像#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

This Works！我甚至都没有想过为什么我需要散列符号来定位我想要的部分。尽管我最终使用了bobince的方法，因为它不需要声明一个变量。 –

是的，这个解决方案更加优雅。 –

使用URL的href值的目标div

相关推荐