Keep a link an active colour

Question

I've created a navigation in a weird way due to how Cargocollective runs. As you can see there's a navigation on the side that scrolls to an anchor once clicked, each dot represents an anchor. What I'm trying to do is have it so when I click on one of the dots it remains a colour until I click another. Exactly like a a:active would behave

a:active{color:green;} is not working.

This is what I've done:

JSFiddle

As you can see a link turns green when you click on it but it doesnt remain green like you'd expect from an active link.

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

`:active` means (more or less) "while being clicked on" – Quentin Mar 09 '14 at 19:52 — Quentin, Mar 09 '14 at 19:52

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

Quentin's right you shouldn't use :active for this, instead you can use :visited or you can use jQuery to set a "clicked" class to your links. Check this for examples: Styling Links.

Have a nice day!

Update:

I suggest you to try this:

add this in your js:

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

And replace this part of your css:

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

By this one:

.current {
    color: green;
}

You can also take a look at this : old topic

I hope this will help you!

edited May 23 '17 at 10:33

Community

1
1

answered Mar 09 '14 at 20:13

Rofez

221
1
7

Not looking for clicked class looking to highlight the current link. – user2898276 Mar 09 '14 at 20:56
Sorry I was busy. You can try what I updated, and tell me if it's what you want. – Rofez Mar 10 '14 at 08:02

Niklas · Answer 2 · 2014-03-09T20:50:02.827

active in this case means: While the mouse Button is pressed on the dot. it would be possible to solve the problem with javascript.

First of all, the Links have to be modified:

You have to give an ID to the links:

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

then you create a function in the document's head:

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

I mean, its probably not the best way to do that, but I think it'll work. Actually, the code is pretty long, so maybe it would be a good idea to put it in another file like scripts.js or something like that.

That's an appalling way to do it. The only reason to ever use `document.all` is if you need to support Internet Explorer 4, and even then you should use it as a fallback for something standard. Listing ever single link by name is a terrible, unmaintainable idea too. Use something that gives you a NodeList that you can loop over. — Quentin, Mar 09 '14 at 20:39
@quentin I don't know why I did document.all :) I think in my thoughts I was in the past... I tried to find a better way than Listing every single link, but then the code didn't work any longer. Thats why I wrote it's not the best way. — Niklas, Mar 09 '14 at 20:53

Keep a link an active colour

2 Answers2