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 :
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…
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?
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 = $(this).attr(‘rel’);