Grow your CSS skills. Land your dream job.

Jquery tabs not functioning in IE7

  • # January 12, 2013 at 4:06 pm

    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?

    # January 12, 2013 at 5:50 pm

    Same prob on ipad too

    # January 12, 2013 at 6:15 pm

    yikes, thanks for the info

    # January 12, 2013 at 6:58 pm

    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?

    # January 14, 2013 at 9:42 pm

    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???

    # January 14, 2013 at 11:50 pm

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

    # January 16, 2013 at 8:06 pm

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".