Cameron Bass Cameron Bass - 3 months ago 19
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;
}
}


HTML:

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


Hopefully there is an easy way to do this.

Answer

Using jQuery:

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

http://api.jquery.com/on/ reference for use of .on()

http://api.jquery.com/addClass/ reference for use of .addClass()

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