如何选择当前页面的链接

Question

当我将鼠标悬停在链接上时，我试图将链接设置在菜单样式中。 然后当鼠标离开链接（不点击它）时，我希望当前链接恢复样式。

html:

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>

css

.current { color: #FFBB3F;}

js

$( "nav a" ).on('mouseover', function(){

    $( "nav a.current" ).removeClass("current");
        $(this).addClass("current");
    });

$( "nav a" ).on('mouseleave', function(){
    $(this).removeClass("current");
    var pageURL = $(location).attr("href");
    $('a[href="pageURL"]').addClass("current");

});

但这不起作用。如果我发出警报

 alert(pageURL);

它给了我当前页面的路径，如果我只粘贴一个 href

$('a[href="index.html"]').addClass("current");

它确实设置了该链接的样式，但显然我希望对当前链接进行样式设置。我第一次尝试这个。任何帮助表示赞赏。谢谢

Answer 1

这将添加和删除当前类以及悬停在上面的样式链接：

var anchors = document.querySelectorAll("#menu a");


// Assign mouseover and mouseout event handlers to each anchor
for(var i = 0; i < anchors.length; i++){
  anchors[i].addEventListener("mouseover", styleIn);
  anchors[i].addEventListener("mouseout", styleOut);
}


// This will hold a reference to whichever anchor has the current class
var currentAnchor = null;

function determineCurrent(){
  for(var i = 0; i < anchors.length; i++){
    if(anchors[i].classList.contains("current")){
      currentAnchor = anchors[i];
    }
  }
}

function styleIn(e){
  determineCurrent();
  e.target.classList.add("hover");
  currentAnchor.classList.remove("current");
}

function styleOut(e){
  e.target.classList.remove("hover");
  currentAnchor.classList.add("current");
}

a { text-decoration:none; }
.current { color: #FFBB3F; }
.hover { text-decoration:underline;}

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>

Answer 2

仅使用 CSS，规则的组合可以非常接近（可能足够接近，具体取决于 #menu 的情况），请参阅 CSS 部分中的 cmets：

/*
  1. Color the current one if the menu isn't being hovered
  2. Color the current link if being hovered
*/
#menu:not(:hover) .current, /* 1 */
#menu a:hover {             /* 2 */
  color: #FFBB3F;
}

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>

仅 CSS 版本的问题是，如果您没有悬停链接而是悬停#menu，则不会突出显示任何内容。我想不出一种纯粹的 CSS 方式来处理它，所以需要一点 JavaScript（参见 cmets）：

// Set a class on #menu only when hovering a link
$("#menu")
  .on("mouseenter", "a", function() {
    $("#menu").addClass("link-hover");
  })
  .on("mouseleave", "a", function() {
    $("#menu").removeClass("link-hover");
  });

/*
  1. Color the current one if the menu doesn't have the link-hover class
  2. Color the current link if being hovered
*/
#menu:not(.link-hover) .current, /* 1 */
#menu a:hover {                  /* 2 */
  color: #FFBB3F;
}

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>