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?

@Mario: The CSS `:active` has different meaning from what OP is trying to achieve. It doesn't remember the last element clicked, but instead references the element that is currently being clicked. When the click event is done, `:active` no longer matches. [Example.](http://jsfiddle.net/TB2rn/1/) — user113716, Jun 20 '11 at 17:00

score 4 · Accepted Answer · answered Jun 20 '11 at 17:16

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/

score 1 · Answer 2 · answered Oct 07 '14 at 10:21

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);
    }
});

score 1 · Answer 3 · answered Jun 20 '11 at 16:55

If I"m understanding, you want this:

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

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

Dogbert · Answer 4 · 2011-06-20T17:19:22.707

1

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

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

edited Jun 20 '11 at 17:19

answered Jun 20 '11 at 16:56

Dogbert

212,659
41
396
397

This worked, partially. When I click an `.inactive` link, it changes the class and everything works. However, when I go back to the original link on which I had `.active` as default, it's background doesn't go to `.active`. The content the link is associated with appears, but the `.active` link appears on a different "tab". Thoughts? – tvalent2 Jun 20 '11 at 17:09
@tvalent2, try the edited version. You may want to limit the selector to `#sidebar a`. – Dogbert Jun 20 '11 at 17:19

score 0 · Answer 5 · answered Apr 24 '13 at 02:56

0

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

answered Apr 24 '13 at 02:56

Ryan Mcphee

21
2

score 0 · Answer 6 · answered Jun 20 '11 at 16:55

0

Try this:

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

answered Jun 20 '11 at 16:55

Naftali

144,921
39
244
303

1

I tried this, but it doesn't remove `.active` on the other links that have been clicked. – tvalent2 Jun 20 '11 at 17:08

Removing/adding link class onclick

6 Answers6

Linked