使链接保持活动颜色[重复]

Question

由于 Cargocollective 的运行方式，我以一种奇怪的方式创建了导航。 As you can see 侧面有一个导航，点击后会滚动到一个锚点，每个点代表一个锚点。我想要做的是拥有它，所以当我点击其中一个点时，它会保持颜色，直到我点击另一个。就像a:active 的行为一样

a:active{color:green;} 不工作。

这就是我所做的：

JSFiddle

正如您所见，当您单击链接时，它会变为绿色，但它不会像您期望的活动链接那样保持绿色。

HTML

<div id="navigation">
    <a href="#i">•</a><br>
    <a href="#ii">•</a><br>
    <a href="#iii">•</a><br>
    <a href="#iv">•</a><br>
    <a href="#v">•</a><br>
    <a href="#vi">•</a><br>
    <a href="#vii">•</a><br>
    <a href="#viii">•</a><br>
    <a href="#ix">•</a><br>
    <a href="#x">•</a><br>
    <a href="#xi">•</a><br>
    <a href="#xii">•</a><br>
    <a href="#xiii">•</a><br>
</div>

CSS

#navigation {
    position: fixed;
    top: 50%;
    margin-top: -140px;
    right: 10px;
    z-index: 1000;
    text-align: center;
    width: 180px;
    font-size: 20px;
    z-index: 9999;
}

#navigation a:link {
    color: #aaa;
    text-decoration: none;
}

#navigation a:hover {
    color: #000;
}

#navigation a:active {
    color: green;
}

JQUERY

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Answer 1

Quentin 说得对，您不应该为此使用:active，而是可以使用:visited，或者您可以使用jQuery 为您的链接设置“点击”类。 检查此示例：Styling Links。

祝你有美好的一天！

更新：

我建议你试试这个：

在你的 js 中添加这个：

$('a').click(function(){
    $('a').removeClass('current');
    $(this).addClass('current');
});

并替换你css的这一部分：

#navigation a:active {
color: green;
text-decoration: none;
}

通过这个：

.current {
    color: green;
}

你也可以看看这个：old topic

希望对你有帮助！

Answer 2

在这种情况下，活动意味着：当鼠标按钮被按下时。 用javascript可以解决这个问题。

首先，必须修改链接：

您必须为链接提供 ID：

<a href="#i" id="LinkA" onClick="color('a')">•</a><br>
<a href="#ii" id="LinkB" onClick="color('b')">•</a><br>
and so on

然后你在文档的头部创建一个函数：

<script type="text/javascript">
   function hey(str) {
      if (str == "a") {
         document.getElementById("LinkA").style.color = "green";    
         document.getElementById("LinkB").style.color = "black";
         document.getElementById("LinkC").style.color = "black";
         [and so on]
      }
      if (str == "b") {
         document.getElementById("LinkA").style.color = "black";    
         document.getElementById("LinkB").style.color = "green";
         document.getElementById("LinkC").style.color = "black";
         [and so on]
      }
   }
</script>

我的意思是，这可能不是最好的方法，但我认为它会起作用。实际上，代码很长，所以最好将它放在另一个文件中，例如 scripts.js 或类似的文件。