Search code examples
jqueryaddclasssubmenuremoveclass

Jquery submenu should have a selected class on click


On click the submenu go to first slide - go to second slide - go to third slide it should go to tab3 with a selected class. not sure what I'm missing.

http://jsfiddle.net/L7R9D/9/

$('a.see-all').on('click', function (e){
    $('a.see-all').removeClass('selected');
    $(this).addClass('selected');
    e.preventDefault();

    $('.select-options a').removeClass("selected");
    $('.submenu').addClass("selected");
    $('.tab-content').hide();
    $('#third').show();
});

Solution

  • You were adding selected to the clicked link but in a line of code just under it you were removing selected again. $('.select-options a').removeClass("selected"); You need to move it to the top It will remove all the selected classes from all the links. And then you can proceed to add the new selected links from there.

    $('a.see-all').on('click', function (e){
            e.preventDefault();
            $('.select-options a').removeClass("selected"); 
            $(this).addClass('selected');
            $('.submenu').addClass("selected");
            $('.tab-content').hide();
            $('#third').show();
    });