Problem with className.indexOf()

i've got a problem with className.indexOf()

here's the code开发者_如何学C

$('#energie').click(function() {
     if(this.className.indexOf('active1, active2')!=-1){}
     else{
     if(this.className.indexOf('inactive1')!=-1){
     $('#navigation div').removeClass();
     $(this).addClass('active1');
     $(this).siblings().addClass('inactive2');
     }
     else {
     $('#navigation div').removeClass();
     $(this).addClass('active2');
     $(this).siblings().addClass('inactive1');
     }
             $("#maincontent > div:visible").fadeOut(300, function(){
         $("div.energiewende").fadeIn(450);
                  ]);
          }

  )};

the problem is, that if className of .this is active1 or active2 the else function will be triggered although it shouldn't.

Your condition check is checking to see if you have "active1, active" as a string, even though that's not how class names are represented internally (they are just separated by space).

If you're using jQuery, you should use the hasClass function:

if($(this).hasClass('active1') || $(this).hasClass('active2'))
   // Do Stuff

indexOf as you are using here is purely a method of strings and has nothign to do with CSS classes. That means this.className.indexOf('active1, active2') looks for the literal string 'active1, active2' in the content of the class attribute. It won't look for active1 and active1 separately.

Since you are using jQuery, you should use it's hasClass method instead:

if ($(this).hasClass('active1') || $(this).hasClass('active2')) {
   // ...
}