Question

I have menu list that contains:

<ul class="content_menu tabs">
        <a href="#" name="content_1" class="tab active"><li class="pager_link_0_active"></li></a>
        <a href="#" name="content_2" class="tab"> <li class="pager_link_1"></li></a>
        <a href="#" name="content_3" class="tab"><li class="pager_link_2"></li></a>
        <a href="#" name="content_4" class="tab"><li class="pager_link_3"></li></a>
        <a href="#" name="content_5" class="tab"><li class="pager_link_4"></li></a>
        <a href="#" name="content_6" class="tab"><li class="pager_link_5"></li></a>
        <a href="#" name="content_7" class="tab"><li class="pager_link_6"></li></a>
        <a href="#" name="content_8" class="tab"><li class="pager_link_7"></li></a> 
        <a href="#" name="content_9" class="tab"><li class="pager_link_8"></li></a>                                              
</ul>

What I want to do is when particular link is clicked I need to remove active from li class name that contains active (e.g pager_link_0_active) and add active to the li that is clicked (e.g pager_link_2_active)

I know there is one way to make it:

$(".active").removeClass("active");

$(this).addClass("active");

but in my situation, active is not seperated, it is part of class name.

Answer 1

According to standards ul can contain only element but what you want can be achived these way:

        $(function () {
            $('ul.content_menu.tabs a.tab').click(function () {
                var newActive = $(this);

                if (newActive.hasClass('active')) {
                    return;
                }

                var oldActive = $('ul.content_menu.tabs a.tab.active');
                oldActive.removeClass('active');
                var oldIndex = $('ul.content_menu.tabs a.tab').index(oldActive);
                oldActive.children().attr('class', 'pager_link_' + oldIndex);

                var newIndex = $('ul.content_menu.tabs a.tab').index(newActive);
                newActive.addClass('active');
                newActive.children().attr('class', 'pager_link_' + newIndex + '_active');
            });
        });

Here is fiddle