保持链接有效颜色

Question

我已经以一种怪异的方式创建了一个导航，这是因为术的运行方式。如您所见，侧面有一个导航，一旦单击，就会滚动到锚固，每个点代表锚点。我要做的就是拥有它，所以当我单击其中一个点时，它仍然是一种颜色，直到我单击另一个点为止。就像 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将"单击"类设置为链接。检查此示例：样式链接。

祝您有美好的一天！

更新：

我建议您尝试一下：

在您的JS中添加此内容：

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

并替换您的css的这一部分：

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

由此：

.current {
    color: green;
}

您也可以看一下：旧主题

我希望这对您有帮助！

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>

我的意思是，这可能不是最好的方法，但我认为这会起作用。实际上，代码很长，所以也许将其放在脚本等文件中是一个好主意。