All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

How to add current class in tabs on the same page?

  • # April 30, 2013 at 12:12 pm

    I m trying to add a current class on the list items.

    • General
    • Pages
    • Posts
    • Slider
    • Social Profiles
    • Footer
    • Support

    But these links dont go to any other page , they will remain on the same page. I m just hiding and showing pages with jQuery. I want to add ‘current’ class to the tab which has been clicked.


    # April 30, 2013 at 12:14 pm

    Using jQuery:

    $(‘.mstoic_tabs li’).click(function(){
    $(‘.mstoic_tabs li’).removeClass();

    # April 30, 2013 at 12:17 pm

    In jQuery it would look like this:

    $(‘document’).ready(function () {
    $(‘.mstoic_tabs’).on(‘click’, ‘li’, function () {
    $(‘.mstoic_tabs .current’).removeClass(‘current’);


    # April 30, 2013 at 12:25 pm

    I like @TheDoc version better.

    It retains any **existing** classes that might already been in place on the `li`.

    # April 30, 2013 at 12:27 pm

    Hey thanks a lot Senff and TheDoc that’s exactly what I wanted.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed