我正在尝试基于锚导航构建此部分.当我点击一个链接时,我会找到所需的锚点,点击的链接会获得一个具有特定样式的类,到目前为止它运行良好:
HTML
<body>
<nav>
<div class="anchor-link" > <a href="#anchor1" > Anchor 1 </a> </div>
<div class="anchor-link"> <a href="#anchor2"> Anchor 2 </a> </div>
<div class="anchor-link"> <a href="#anchor3"> Anchor 3 </a> </div>
<div class="anchor-link"> <a href="#anchor4"> Anchor 4 </a> </div>
<div class="anchor-link"> <a href="#anchor5"> Anchor 5 </a> </div>
</nav>
<div class="main-wrap">
<div id="anchor1"></div>
<div id="anchor2"></div>
<div id="anchor3"></div>
<div id="anchor4"></div>
<div id="anchor5"></div>
</div>
</body>
JS
$(document).ready(function(){
$(".anchor-link").on("click", function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
现在我想在href中获取值但是这不起作用并返回undefined:
var href = $(this).attr('href');
console.log(href);
})
假设它工作,并且var href保存点击链接的值,例如"#anchor1",我将如何继续然后在"main-wrap"中找到id为"#anchor1"的div ？
这会工作,我将如何填写查找查询？
$(".main-wrap").find(...);
这是一个jsFiddle做你想要的:jsFiddle
还有jquery片段:
$(document).ready(function(){
$(".anchor-link").on("click", function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
var href = $("a", this).attr('href');
$(href).html("You clicked " + href + " !");
});
});
你试图获得$(this)元素的href 引用被<div class="anchor-link" >点击的,它没有任何href属性.
通过执行此操作:$("a", this).attr('href')您告诉Take <a>我刚刚单击的div中元素的href属性的值
在此之后,您可以选择相应的div $(href)