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或类似的东西。

保持链接活动颜色

2 个答案: