Grow your CSS skills. Land your dream job.

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.

    Thanks.

    # April 30, 2013 at 12:14 pm

    Using jQuery:

    $(‘.mstoic_tabs li’).click(function(){
    $(‘.mstoic_tabs li’).removeClass();
    $(this).addClass(‘current’);
    });

    http://codepen.io/senff/pen/tgEpn

    # 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’);
    $(this).addClass(‘current’);
    });
    });

    Demo: http://codepen.io/ggilmore/pen/ede314bc8585ed8c14d7871ca3aedbec

    # 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.

*May or may not contain any actual "CSS" or "Tricks".