Highlighting Menu Item when clicked and active

Question

I have a simple menu for my site with the normal paging links, home, About Us,...

I have been trying to find a way to highlight the menu item that is clicked, but all solutions are not working, although it is working on the solution fiddles, so its probably a mistake from my side as I have very little javascript knowledge So..

The Menu is:

<div class="circle">
   <ul id="nav" class="cirular-list" >
      <li><a href="#Home">Home</a></li>
      <li><a href="#AboutUs">About Us</a></li>                                                      
      <li><a href="#OurWork">Our Work</a></li>
      <li><a href="#ContactUs">Contact Us</a></li>                            
      <li><a href="#Services">Services</a></li>
   </ul>
</div>

The CSS:

circle a {
    font-family:'Roboto Condensed', sans-serif;
    font-weight: 100;    
    display: block;    
    width: 20%;
    height: 20%;     
    color:#000000;
    text-align:center;
    line-height:400%;
    margin-left: -11%;
    margin-top: -9%;
    position: absolute;
    text-align: center;
    border:1px solid #ffffff;
    border-radius: 50%;   
    -webkit-transition: border-color 1s ease;
    -moz-transition: border-color 1s ease;
    -o-transition: border-color 1s ease;
    -ms-transition: border-color 1s ease;
    transition: border-color 1s ease;         

}

.circle a:hover {

  color:#000000;

   border-color: #000000;

}

#nav a:active, #nav a.active {

    border-color:#000000 !important;
}

I tried many jQuery solutions for example:

document.querySelector('.menu-button').onclick = function (e) {
    e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

$(document).ready(function() {
    $("#nav li").click(function (e) {
        e.preventDefault();
        $("#nav li a.active").removeClass("active"); //Remove any "active" class  
        $("a", this).addClass("active"); //Add "active" class to selected tab  

        // $(activeTab).show(); //Fade in the active content  
    });
});

I imagine its a simple thing, but I am stuck...

Answer 1

Try something like this

$(".menu-button").on("click", function(){
    $("#nav li a.active").removeClass("active");
    $(this).addClass("active");
})

Answer 2

You don't require any javascript code for this. Add this to your CSS:

#nav a:active, #nav a.active {
       border: 1px solid #000;
       background-color: yellow;
   }

Since you were only assigning the border-color and no border-style (ie solid, dashed, etc.), you were not able to see the border.

Answer 3

In your CSS replace :active with :focus .

Demo on Fiddle

CSS:

.circle a {
    font-family:'Roboto Condensed', sans-serif;
    display: block;
    color:#000000;
    text-align:center;
    position: absolute;
    text-align: center;
    border:1px solid #ffffff;
    border-radius: 50%;
    -webkit-transition: border-color 1s ease;
    -moz-transition: border-color 1s ease;
    -o-transition: border-color 1s ease;
    -ms-transition: border-color 1s ease;
    transition: border-color 1s ease;
}
.circle a:hover {
    color:#000000;
    border-color: #000000;
}
#nav a:focus, #nav a.active {
    border-color:#00ff00;
}