Code isn't compatible with IE?

Question

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

Answer 1

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.

Answer 2

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;

Answer 3

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