Cameron Bass Cameron Bass - 1 year ago 88
CSS Question

Font weight when active - CSS

Currently I am trying to make the selected list item STAY bold after selected and go back to normal after a different item is selected. basically I want a "currently selected tab". is there a way I can do this with css or do I need Javascript? Here is my code ->

CSS: (using SASS)

.setup-nav {
float: left;
position: relative;
width: 20%;
padding-right: 20px;
box-sizing: border-box;

font-size: 18px;
color: $base-link-color;
text-align: left;

li {
border-top: none;
border-bottom: none;

&.active {
font-weight: bold;


<ul class="setup-nav">
<li><a href="#install-http">HTTP</a></li>
<li><a href="#install-email">Email</a></li>
<li><a href="#install-ruby">Ruby</a></li>
<li><a href="#install-python">Python</a></li>

Hopefully there is an easy way to do this.

Answer Source

Using jQuery:

$(".setup-nav").on( "click", "li", function(){ // attach to Click event
    $(".setup-nav").removeClass("active"); // reset all <li> to no active class
    $(this).addClass("active"); // add active class to this <li> only
}); reference for use of .on() reference for use of .addClass()

Someone may come along with pure JavaScript answer (no jQuery library use) if you prefer that approach.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download