使用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...
不需要正则表达式的简单拆分可以
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的方法,因为它不需要声明一个变量。 –
是的,这个解决方案更加优雅。 –
太棒了,谢谢!我不知道你可以像你在第二个例子中那样从'this'中提取数据。我对Jquery仍然很陌生,所以当我走的时候,我一直在困惑这一切。 –
@art:的确,这不是jQuery功能,它是底层浏览器DOM的一部分。有些东西是Plain Old DOM所做的,jQuery并没有真正帮助你,因此很好地了解这两者。 – bobince