CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Brandon Brown
Brandon Brown

Reputation: 341

Cannot add/remove class with jQuery in IE8 and below

I am using jQuery to show and hide sections in a page. The approach works in Chrome, FF, and Safari, but it breaks in IE8 and 7. Tried using animate, fade, and opacity. Nothing seems to work in IE. According to the IE Developer Tools' js console, the selected elements have a class of 'active', but when I look at the dom tree in the Dev Tools html window, the active' class has not been removed or rewritten to the DOM.

The Mark-up

<nav> 
<ul>
<li id="foo">Show Section 1</li>
<li id="bar">Show Section 2</li>
</ul>
</nav>

<div id="items">
<section class="foo">Content Section 1</section>
<section class="bar">Content Section 2</section>
</div>

The CSS

#items > section {display: none;}
.active {display: block;}

The JS

$('nav li').click(function(){
    var $me = $(this);
showSection($me.attr('id'));
});

showSection function(whichSection){
    $('#items > section').removeClass('active');    
    $('#items > '+'.'+whichSection).addClass('active');
}

Any advice is greatly appreciated. I am under a nasty deadline. Cheers.

Upvotes: 0

Views: 3902

Answers (3)

thecodeparadox
thecodeparadox

Reputation: 87073

you function declaration was wrong:

  function showSection (whichSection){
      $('#items > section').removeClass('active');    
      $('#items > #' + whichSection).addClass('active');
  }

Or 

   var showSection = function(whichSection){
        $('#items > section').removeClass('active');    
        $('#items > #' + whichSection).addClass('active');
    }

NOTE: IE don't understand the section. So you can use html5shiv / Modernizr. to find out HTML5 tags.

Upvotes: 1

Ram
Ram

Reputation: 144689

IE8 and below do not understand section tag unless you force it know the tag, you can use html5shiv js library.

http://code.google.com/p/html5shiv

Upvotes: 0

Nick George
Nick George

Reputation: 326

You have your id's and classes mixed up.

$('nav li').click(function(){
    var $me = $(this);
    showSection($me.attr('id'));
});

showSection function(whichSection){
    $('#items > section').removeClass('active');    
    $('#items > #' + whichSection).addClass('active');
}

Upvotes: 2

Related Questions