CODEWITHSUNDEEP
javascriptjquerytabs
Johnny
Johnny

Reputation: 217

Code isn't compatible with IE?

$(document).ready(function() {
    var url = document.location.toString();
    $('.tab').click(function() {
        if($(this).is(".active")) {
            return;
        }

        var classy = $(this).attr("class").split(" ").splice(-1);
        var innerhtml = $('.content.'+classy).text();
        $('#holder').html(innerhtml);
        $('.tab').removeClass('active');
        $(this).addClass('active');
    });

    var url = document.location.toString();

    if(url.match(/#([a-z])/)) {
        //There is a hash, followed by letters in it, therefore the user is targetting a page.  
        var split = url.split("#").splice(-1);
        $('.tab.'+split).click();
    }
    else {
        $('.tab:first').click();
    }
});

Hey, I was just informed by one of my commenters that this code doesn't work in IE. I can't for the life of me figure out why. Whenever you switch tabs, the content of the tab doesn't change. Meanwhile the content of the #holder div is all the tabs combined.

Any ideas?

Upvotes: 0

Views: 204

Answers (3)

aolde
aolde

Reputation: 2295

I did all changes which Ryan suggested except adding the space between '.content' and the period as it is needed. He could not have known without the source code.

I changed your .splice(-1) to [1] so that I'm choosing the second item in the array, which is the class name. It looks like .splice(-1) is behaving differently in IE and other browsers.

I have tested the code with IE 7-8 and it works.

Source code as it is now:

$(document).ready(function() {
    var url = document.location.hash;

    $('.tab').click(function() {
        if ($(this).hasClass("active")) {
            return;
        }

        var classy = $(this).attr("class").split(" ")[1];
        var innerhtml = $('.content.' + classy).text();

        $('#holder').html(innerhtml).slideDown("slow");

        $('.tab').removeClass('active');
        $(this).addClass('active');
    });

    if (url.match(/#([a-z])/)) {
        //There is a hash, followed by letters in it, therefore the user is targetting a page.  
        var split = url.split("#")[1];
        $('.tab.' + split).click();
    }
    else {
        $('.tab:first').click();
    }
});

Upvotes: 0

Ryan
Ryan

Reputation: 778

Hard to tell without an IE version and a page to look at what exactly is happening- but here are some best guesses:

change:

if($(this).is(".active")) {

to:

if($(this).hasClass("active")) {

change:

var innerhtml = $('.content.'+classy).text();

to: 

var innerhtml = $('.content .'+classy).text(); // note the space

change:

var url = document.location.toString();

to:

var url = document.location.hash;

Upvotes: 1

Gavin Gilmour
Gavin Gilmour

Reputation: 6973

Not the answer you're after, but I'd seriously recommend looking into the jQueryui tabs widget if you can. It's made my life a lot easier dealing with this stuff at least.

Upvotes: 3

Related Questions