jquery toggleclass fit with css hover effect

Question

I am new to jquery and trying to understand toggleClass function. I tried couples times myself and read some posts on SO but the effect still won't appear.

html:

<ul id="lists">
<li><a id="a" href="#">a</a></li>
<li><a id="b" href="#">b</a></li>
<li><a id="c" href="#">c</a></li>
<li><a id="d" href="#">d</a></li>
<li><a id="e" href="#">e</a></li>
</ul>

css:

#lists {
list-style-type: none;
}
#lists > li {
display: inline;
}
a:link, a:visited {
padding: 10px 20px;
text-decoration: none;
color: black;
background-color: red;
border: 4px solid white;
}
a:hover {
color: white;
}
.active {
background-color: green;
}

javascript:

$(document).ready(function () {
$("a#a, a#b, a#c, a#d, a#e").on("click", function () {
    $(this).toggleClass("active");
});
});

I have also make a demo. What is wrong with my codes?

Best regards

Answer 1

It's because your :visited overrides your $.toggleClass, you should do something like this:

CSS

a {
    padding: 10px 20px;
    text-decoration: none;
    color: black;
    background-color: red;
    border: 4px solid white;
}

Check out this Fiddle..