javascript - CSS - 在这种情况下删除类的更好方法？

Question

我有一个包含 5 项的菜单。当我点击任何元素时，我添加一个类来改变它的颜色。我还从其他 4 个元素中删除了颜色，无论它们是否有颜色。是否有更好的方法(也许是通过 CSS)来删除那些未被选中的类？

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

Answer 1

放弃为每个元素使用唯一类，并使用单个通用类来标记当前元素。

例如，使用 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');
});