Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #44472
    ghafirsayed
    Member

    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.

    #133629
    Senff
    Participant

    Using jQuery:

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

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

    #133631
    TheDoc
    Member

    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

    #133633
    Paulie_D
    Member

    I like @TheDoc version better.

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

    #133634
    ghafirsayed
    Member

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.