Question

我正在尝试基于锚点导航构建此部分。当我点击一个链接时，我会找到所需的锚点，点击的链接会获得一个具有特定风格的类，到目前为止它运作良好：

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为“div”的div ＃anchor1" ？

这会起作用，我将如何填写查找查询？

$(".main-wrap").find(...);

Answer 1

这是一个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')你告诉获取我刚刚点击的div中<a>元素的href属性的值

在此之后，您可以使用$(href)

选择相应的div

Answer 2

您正试图获取size: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), href并且没有该属性

将选择器更改为<div>或使用find（）

查看div内部

<a>

Answer 3

尝试以下点击处理程序

$(document).ready(function(){
  $(".anchor-link a").on("click", function(){
    $(this).parents('.anchor-link').addClass("active");
    $(this).parents('.anchor-link').siblings().removeClass("active");
      var href = $(this).attr('href');
      console.log(href);
   });
})

获取href值，然后将其作为id找到

3 个答案: