如何select link 当前页

Question

我试图在我的 link 菜单中设置鼠标悬停时的样式。然后，当鼠标离开 link（不点击它）时，我希望当前的 link 返回样式。

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");

它确实具有 link 的样式，但显然我希望当前的 link 具有样式。我第一次尝试这个。任何帮助表示赞赏。谢谢

Answer 1

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

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 部分中的评论：

/*
  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 的版本有一个问题，如果您没有将鼠标悬停在 link 上，而是将鼠标悬停在 #menu 上，则不会突出显示任何内容。我想不出一个纯粹的 CSS 方法来处理它，所以有点 JavaScript （见评论）：

// 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>

如何select link 当前页

How to select link of current page

html

javascript

css

jquery

href