Jquery tabs not functioning in IE7

[JMar]

Hello Friendly Computer Folks,
First time posting and first time code-penning, so we’ll see how this goes!

My simple jquery tabs are not fully functioning in IE7 – but are fully functioning in FF, Chrome, Safari. There are only 2 tabs, when I click on one to change the content, the content disappears but no new content appears as it should. (The viewed state is successfully taken away, but never applied to the new content, and never applied again for that matter – meaning that content is still missing when clicking back on the first tab.) I’m using a sprite/background-pos for the tabs – and that part IS working. I don’t find any errors in the console. Below is my codepen and real link :

artichokejalapenodesign.com/services.html
http://codepen.io/anon/pen/CKgif

In the codepen, I’m seeing half the problem (new content doesn’t show up but prior content comes back upon clicking the first tab) I hope I didn’t make a mistake in the codepen – the jquery is all there at least.

I should state my underlying uneasiness that my tabs aren’t fully semantic, as I use two IDs twice, but I didn’t think this could be the reason – my selectors for these said IDs are specific enough in the js to not mix them up…

Help anyone?

[JMar]

yikes, thanks for the info

[JMar]

Eric – ya know what, that’s weird because I tested it on Browserstack on 5 diff ipads and the tabs seem to work fine. Though I am a little skeptical as to the emulator, bc it renders the iphone differently than on my actual iphone. May I ask what kind of ipad you used?

[JMar]

Okay JS peeps, I restyled my page so as to avoid using the tabs in ie 8 and under.

But does anyone know why these simple jquery tabs wouldn’t work in ie 7, but do work in ie 8,9, ff, chrome, safari and opera???

[neerukool]

You have used ID’s for both link and div. Not sure what the problem is, but there is a shorter (and safer) way to do:

1) For the clicking element (li or a) give an rel=”#div_name”
2) Get that inside variable (show_div) on click event.
3) Hide ‘all’ tab-content div’s by giving common class.
4) show only the div whose value is present in variable.

var show_div
$(“.tab-list a”).click(function(){
$(“.tab-list a”).removeClass(‘active’);
$(“.tab_content”).hide();
var show_div = $(this).attr(‘rel’);
$(show_div).show();
$(this).addClass(‘active’);
return false;
});

[JMar]

neerukool – thank you for your response. I will try it this way instead.

[Author]

Posts