Removing/adding link class onclick

Question

I researched quite a bit on onClick changes for links but couldn't quite figure out the solution I need. I have a side bar menu that contains three links. I have a default "active" class added to the content I want to appear as default. However when I click another link in the sidebar, I want the previous link's "active" class to be removed, replaced with "inactive", then apply "active" to the new link. Here's my code:

HTML:

<div id="sidebar">
    <ul>
        <li><a href="#" id="1" class="active">1</a></li>
        <li><a href="#" id="2" class="inactive">2</a></li>
        <li><a href="#" id="3" class="inactive">3</a></li>
    </ul>
</div>

CSS:

a.active {
    background-color:#ccd9ff;
    border-radius:15px 15px;
}

a.inactive {
    border:0;
    background:0;
}

jQuery:

$(function(){
    $('a.inactive').click(function(){
        $('a.inactive').removeClass('inactive');
        $(this).addClass('active');
    });
});

I read this previous post which helped me figure out how to addClass onclick (above), however I wasn't able to then remove the 'active' class of the inactive links. Can someone help me out?

Answer 1

Try this:

$(function(){
    $('a.inactive').click(function(){
        $(this).removeClass('inactive'); //remove the class *only* from this one
        $(this).addClass('active');
    });
});

Answer 2

$(function(){
    $('#sidebar').click(function(){
       $("a.active").removeClass("active")
           .addClass("inactive");
       $(this).removeClass('inactive')
           .addClass('active');
    });
});

Answer 3

You need to only remove the class from the current a.

$(function(){
    $('a.inactive').click(function(){
        $('a').addClass('inactive');
        $(this).removeClass('inactive').addClass('active');
    });
});

Answer 4

enter code here $(document).ready(function () {
$('.show-sidebar').on('click', function (e) {
    e.preventDefault();
    $('div#main').toggleClass('sidebar-show');
    setTimeout(MessagesMenuWidth, 250);
});
var ajax_url = location.hash.replace(/^#/, '');
if (ajax_url.length < 1) {
    ajax_url = 'ajax/dashboard.html';
}
LoadAjaxContent(ajax_url);
$('.main-menu').on('click', 'a', function (e) {
    var parents = $(this).parents('li');
    var li = $(this).closest('li.dropdown');
    var another_items = $('.main-menu li').not(parents);
    another_items.find('a').removeClass('active');
    another_items.find('a').removeClass('active-parent');
    if ($(this).hasClass('dropdown-toggle') || $(this).closest('li').find('ul').length == 0) {
        $(this).addClass('active-parent');
        var current = $(this).next();
        if (current.is(':visible')) {
            li.find("ul.dropdown-menu").slideUp('fast');
            li.find("ul.dropdown-menu a").removeClass('active')
        }
        else {
            another_items.find("ul.dropdown-menu").slideUp('fast');
            current.slideDown('fast');
        }
    }
    else {
        if (li.find('a.dropdown-toggle').hasClass('active-parent')) {
            var pre = $(this).closest('ul.dropdown-menu');
            pre.find("li.dropdown").not($(this).closest('li')).find('ul.dropdown-menu').slideUp('fast');
        }
    }
    if ($(this).hasClass('active') == false) {
        $(this).parents("ul.dropdown-menu").find('a').removeClass('active');
        $(this).addClass('active')
    }
    if ($(this).hasClass('ajax-link')) {
        e.preventDefault();
        if ($(this).hasClass('add-full')) {
            $('#content').addClass('full-content');
        }
        else {
            $('#content').removeClass('full-content');
        }
        var url = $(this).attr('href');
        window.location.hash = url;
        LoadAjaxContent(url);
    }
    if ($(this).attr('href') == '#') {
        e.preventDefault();
    }
});
var height = window.innerHeight - 49;
$('#main').css('min-height', height)
    .on('click', '.expand-link', function (e) {
        var body = $('body');
        e.preventDefault();
        var box = $(this).closest('div.box');
        var button = $(this).find('i');
        button.toggleClass('fa-expand').toggleClass('fa-compress');
        box.toggleClass('expanded');
        body.toggleClass('body-expanded');
        var timeout = 0;
        if (body.hasClass('body-expanded')) {
            timeout = 100;
        }
        setTimeout(function () {
            box.toggleClass('expanded-padding');
        }, timeout);
        setTimeout(function () {
            box.resize();
            box.find('[id^=map-]').resize();
        }, timeout + 50);
    })
    .on('click', '.collapse-link', function (e) {
        e.preventDefault();
        var box = $(this).closest('div.box');
        var button = $(this).find('i');
        var content = box.find('div.box-content');
        content.slideToggle('fast');
        button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
        setTimeout(function () {
            box.resize();
            box.find('[id^=map-]').resize();
        }, 50);
    })
    .on('click', '.close-link', function (e) {
        e.preventDefault();
        var content = $(this).closest('div.box');
        content.remove();
    });
$('#locked-screen').on('click', function (e) {
    e.preventDefault();
    $('body').addClass('body-screensaver');
    $('#screensaver').addClass("show");
    ScreenSaver();
});
$('body').on('click', 'a.close-link', function(e){
    e.preventDefault();
    CloseModalBox();
});
$('#top-panel').on('click','a', function(e){
    if ($(this).hasClass('ajax-link')) {
        e.preventDefault();
        if ($(this).hasClass('add-full')) {
            $('#content').addClass('full-content');
        }
        else {
            $('#content').removeClass('full-content');
        }
        var url = $(this).attr('href');
        window.location.hash = url;
        LoadAjaxContent(url);
    }
});

Answer 5

If I"m understanding, you want this:

$(function(){
    $('a.inactive').click(function(){
        $("a.active").removeClass("active")
                     .addClass("inactive");

        $(this).removeClass('inactive')
               .addClass('active');
    });
});

Answer 6

Event delegation would be nice here. You can use the delegate()^[docs] method to only trigger the handler on descendants of #sidebar that have the inactive class.

Then use the toggleClass()^[docs] method to toggle the active and inactive classes.

$(function(){
    var sidebar = $('#sidebar');  // cache sidebar to a variable for performance

    sidebar.delegate('a.inactive','click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
    });
});

You can test the code here: http://jsfiddle.net/dstpt/