Question

编辑：删除dev-link！

在底部，您会看到站点地图导航。如果我将导航点悬停在底部，它也应该在我的顶部导航中突出显示（addClass）相同的Navpoint。你会看到链接是相同的。对于exp。只有六个......

我将href attr.上的“mouseHover”写入我的变量“aHref”：

$(".psSitemap a").hover(
    function() {
        var aHref = $( this ).attr('href');
        console.log(aHref);

        // addClass 'active' to the comparable Top Navigation Item href is the same!
    }, function() {
        // removeClass 'active' at Top Navigation
    }
);

但是我如何在我的文档中“找到”可比的ahref.attr？

感谢您的帮助。

Answer 1

对于var aHref = $( this ).attr('href');，匹配的顶部导航链接为

$(".full-size a[href='" + aHref +  "']")

对于是否可以更简单地编写函数来更改悬停站点地图链接上匹配的topnav链接的问题 - 可以通过使用toggleClass()而不是在两个单独的函数中添加和删除类来减少它而不是声明任何变量（虽然这对于可读性很有用，但不需要）：

$(document).ready(function () {
    $(".psSitemap a").hover(
    function () {
        $(".full-size a[href='" + $(this).attr('href') + "']").toggleClass('comparable');
    });
});

ul {
  list-style-type: none;
}
li {
  display: inline;
}
a {
  color: #000;
}
.comparable {
  background-color: blue;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="full-size">
  <li><a href="first.html">First</a>

  </li>
  <li><a href="second.html">Second</a>

  </li>
  <li><a href="third.html">Third</a>

  </li>
</ul>
<ul class="psSitemap">
  <li><a href="first.html">First</a>

  </li>
  <li><a href="second.html">Second</a>

  </li>
  <li><a href="third.html">Third</a>

  </li>
</ul>

Answer 2

这可以是一个解决方案：

$( document ).ready(function() {



  $( ".psSitemap a" ).hover(


    function() {

      // add href from hover pos.
      var aHref = $( this ).attr('href');
      // comparable 
      var topNav = $(".full-size a[href='" + aHref +  "']");


      // addClass 'active' to the comparable Top Navigation Item          
      $(topNav).addClass('comparable');



    }, function() {
      var aHref = $( this ).attr('href');
      var topNav = $(".full-size a[href='" + aHref +  "']");

      // removeClass 'active' at Top Navigation
      $(topNav).removeClass('comparable');
    }
  );





});

感谢马蒂亚斯的帮助。它有效，但我想我可以写得更容易吗？！你觉得怎么样？？

jQuery - 如何在文档中找到相同的href attr？

2 个答案: