CODEWITHSUNDEEP
javascriptjquerycsscss-selectors
jd1138
jd1138

Reputation: 69

CSS - better way to remove class in this case?

I have a menu of 5 items. When I click any item, I add a class to change color on it. I also remove the color from the other 4 items, whether they have color or not. Is there a better way, perhaps through CSS, to remove those classes that aren't selected?

 switch(currentC.data("template")) {
  case "cataction1": {
    currentC.addClass( "active cataction1Current" );
    $( ".catbarlist li" ).not( currentC ).removeClass( "cataction2Current cataction3Current cataction4Current cataction5Current active activenotransit" ); 
    break;
  }
  case "cataction2": {
    currentC.addClass( "active cataction2Current" );
    $( ".catbarlist li" ).not( currentC ).removeClass( "cataction1Current cataction3Current cataction4Current cataction5Current active activenotransit" ); 
    break;
  }
  case "cataction3": {
    currentC.addClass( "active cataction3Current" );
    $( ".catbarlist li" ).not( currentC ).removeClass( "cataction1Current cataction2Current cataction4Current cataction5Current active activenotransit" ); 
    break;
  }
  case "cataction4": {
    currentC.addClass( "active cataction4Current" );
    $( ".catbarlist li" ).not( currentC ).removeClass( "cataction1Current cataction2Current cataction3Current cataction5Current active activenotransit" ); 
    break;
  }
  case "cataction5": {
    currentC.addClass( "active cataction5Current" );
    $( ".catbarlist li" ).not( currentC ).removeClass( "cataction1Current cataction2Current cataction3Current cataction4Current active activenotransit" ); 
    break;
  }
 }

Upvotes: 0

Views: 76

Answers (4)

Chuck Le Butt
Chuck Le Butt

Reputation: 48798

I assume all those classes are necessary (as you have an .active class already). I also assume there's a good reason you're not using a click event.

If so, the first thing you could do is make it a lot cleaner/easier on yourself by creating a function to remove the unwanted styles. Lots of repeating code is not good -- hard to read, hard to maintain. For example:

function removeCatbarColor() {
    $(".catbarlist li").removeClass("cataction1Current cataction2Current 
    cataction3Current cataction4Current cataction5Current active activenotransit");
}

And then calling it before applying the style to the active one:

switch(currentC.data("template")) {
  case "cataction1": {
    removeCatbarColor();
    currentC.addClass( "active cataction1Current" );
    break;
  }
  case "cataction2": {
    removeCatbarColor();
    currentC.addClass( "active cataction2Current" );
    break;
  }
  ...

There could probably be further improvements, but without seeing your HTML/CSS I can only guess. (Do you really need so many classes? A working JSFiddle would really help.)

A better way of handling things, given your description below, would be to have permanent classes for each cataction. So something like:

<ul>
  <li class="cataction1">Link</li>
  <li class="cataction2">Link</li>
  <li class="cataction3">Link</li>
  <li class="cataction4">Link</li>
</ul>

That way all you need in your CSS is:

.cataction1 { 
  // styles when not active
}
.cataction1.active {
  // styles when active
}
// etc

Which allows you to simplify your JS like so:

$('li').on('click', function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

That is a much better way of handling things.

Upvotes: 0

Leonid Lazaryev
Leonid Lazaryev

Reputation: 326

Other solution might be:

$(document).on("click", ".catbarlist li", function(e){
    $(this).addClass('active');
    $(this).siblings('.active').removeClass('active');
});

Upvotes: 0

alex
alex

Reputation: 1350

Example menu:

<li class="menu-item">
    <a href="#">About</a>
    <a href="#">Home</a>
</li>

Add the following CSS:

 .menu-item .active{
         background-color:#1B3E70;
         color:white;

    }

Then with jquery:

$('.menu-item a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    });

Upvotes: 0

Marat Tanalin
Marat Tanalin

Reputation: 14123

Drop using a unique class for each item and use a single common class for marking current item.

For example, with jQuery:

$(document).on('click', '.my-menu > LI', function() {
    // Unmarking previously marked item.
    $(this.parentNode).children('.cur').removeClass('cur');

    // Marking new current item.
    $(this).addClass('cur');
});

Upvotes: 1

Related Questions