CODEWITHSUNDEEP
jqueryaddclassremoveclass
Jonah Lee
Jonah Lee

Reputation: 37

JQuery element unaffected by click after removeClass/addClass

Not sure how to explain this, but here's the JS fiddle. http://jsfiddle.net/1kLsoj6h/

If you click on anything, then back to "Dashboard", it's unaffected. I'm not sure why that's happening. Here's the code: 

$('#Dashboard').addClass('tabs_active').removeClass('tabs');

$('.tabs').click(function(){
    $('.tabs_active').addClass('tabs').removeClass('tabs_active');
    $(this).addClass('tabs_active').removeClass('tabs');
});

Here's the HTML for Dashboard

<div id="Dashboard" class="tabs ">
    <i class="fa fa-tachometer fw"></i>
    <span id="dash/dash.php" class="remove">Dashboard</span>
</div>

Anyone have any ideas?

Upvotes: 0

Views: 90

Answers (2)

Christian
Christian

Reputation: 4641

You should change the order of your statements. When you remove the tabs-class before adding the click-event, the #Dashboard will not be affected as it does not have the tabs-class. 

$('.tabs').click(function(){
    $('.tabs_active').addClass('tabs').removeClass('tabs_active');
    $(this).addClass('tabs_active').removeClass('tabs');
});

$('#Dashboard').addClass('tabs_active').removeClass('tabs');

or just perform the click-event to select it if you prefer this (instead of the last line):

$('#Dashboard').trigger('click');

Upvotes: 1

renakre
renakre

Reputation: 8291

Change this 

 $('#Dashboard').addClass('tabs_active').removeClass('tabs');

to this

  $('#Dashboard').addClass('tabs_active');

If you remove tabs class from #Dashboard, the $('.tabs').click(function(){ event will not be applied to it, and it will not work.

DEMO: https://jsfiddle.net/1kLsoj6h/2/

Upvotes: 0

Related Questions