IE8 toggleClass not working properly

Question

Well I have a menu and there I want to have an class called active, when its active, obviously.

To toggle this class I am using the jQuery toggle function, but it does just activate it in the js element. If I check the dom element, this class is never set. But I need this class, because of my CSS styles.

I know that there are already many topics about toggleClass jQuery, but they doesn't fit (at least I couldn't find anything suitable)

Here some code:

$('#menu').on('click', '.tab span', function (e) {
    e.stopPropagation();
    var $tab = $(this).parent('.tab');
    $tab.siblings('.tab.active').removeClass('active');
    $tab.toggleClass('active');
});

HTML markup

<div id="menu">
    <div class="tab">
        <span></span>
    </div>
</div>

Its working in all browsers, except IE8 Thanks in advance.

Answer 1

Try this instead:

$('#menu').on('click', '.tab span', function (e) {
    e.stopPropagation();
    var $tab = $(this).parent('.tab');
    $tab.addClass('active').siblings('.tab').removeClass('active');
});

Answer 2

Try this:

$('#menu').on('click', '.tab span', function (e) {
    e.stopPropagation();
    var $tab = $(this).parent('.tab');

    // remove active from all tabs
    $('#menu .tab').removeClass('active');

    // make current tab as active
    $tab.addClass('active');
});