jQuery Hash Detection Internet Explorer

Question

I'm building navigation tabs using jQuery, and am detecting the URL hash value to use as a reference as to which navigation tab to go to on page load. For example, when someone goes to: example.com/profile.php#media, the 'media' tab is switched to automatically.

My jQuery code works in Safari, Firefox, Chrome, and Opera, but does not work in any version of Internet Explorer (tested IE 6 - 10). Is there anything in my code that making it incompatible with IE?

JavaScript:

$(document).ready(function() {

tab = $('.tab');

function switch_active_tab() {
    tab.removeClass('active_tab');
    $(this).addClass('active_tab');
}

function hash_detect() {
    hash = document.location.hash.replace('#','');
    active_tab_id = $('.active_tab').attr('id').replace('-manager', '');
    // check if hash value is valid
    if( hash == 'pages' || hash == 'media' || hash == 'templates' || hash == 'scripts' ) {
        // if hash is not the same as the active tab
        if( hash !== active_tab_id ) {
            tab.removeClass('active_tab');
            $(document.location.hash+'-manager').addClass('active_tab');
        }
    }
    else {
        document.location = '#pages';
    }

}

function hash_respond() {
    hash = document.location.hash.replace('#','');
    active_tab_id = $('.active_tab').attr('id').replace('-manager', '');
    if( hash !== active_tab_id ) {
        document.location = '#' + active_tab_id.replace('-manager', '');
    }
}

$(document).ready(hash_detect);
$(window).bind('hashchange', hash_detect);
tab.click(switch_active_tab);
tab.click(hash_respond);

});

Corresponding HTML:

<div id="tab_wrapper">
    <div class="tab active_tab" id="pages-manager">Pages</div>
    <div class="tab" id="media-manager">Media</div>
    <div class="tab" id="templates-manager">Templates</div>
    <div class="tab" id="scripts-manager">Scripts</div> 
</div>

Could this be a similar issue to this: [window-location-hash-issue-in-ie7](http://stackoverflow.com/questions/934865/window-location-hash-issue-in-ie7) ? — Nope, Dec 22 '12 at 22:48
Did you try using `window.location.href` and `window.location.hash` ? — adeneo, Dec 22 '12 at 22:49
@FrançoisWahl No, I am not trying to scroll to any specific location on the page, I am just trying to change the class of my tabs based on the URL's hash value. — Zack, Dec 22 '12 at 22:51
Could also just be scope issues, seeing as **all** your variables are global, and the `var` keyword is'nt used at all in your code. Also, you should put the event handlers **inside** the document ready function, not after it, or wait, is that a ready function inside a ready function, seems like a great idea ? — adeneo, Dec 22 '12 at 22:56
@deraad: Ah, I see. Sorry it wasn't a useful link. I tested the code in a fiddle in IE but no immediate errors seem to show. — Nope, Dec 22 '12 at 22:56

Ian Atkin · Accepted Answer · 2012-12-22T23:07:25.743

According to MSDN, the location object belongs to window.

I took a look at some of my code that uses the hash and I only refer to location.hash and have never encountered issues with IE. I suspect that you can either try using window.location.hash or simply location.hash.

Another problem that I see is that you are not declaring any variables with the var keyword. IE positively borks at this. All variables should be declared like so...

var hash; // simple declaration

Or...

var hash = window.location.hash.replace('#', ''); // declaration with assignment

It's also possible that IE is having issues with something completely unrelated. I would check to make sure that active_tab_id is getting the value you expect.

As a last resort, you should use the IE Developer Tools. The debugger isn't all that, but it can be useful at times.

In Javascript, you can always leave out `window.`, unless there is a variable in a closer scope with the same name. Doing `location='http://google.com';`, for example, redirects without having touched the `window` object. — Robin Kanters, Dec 22 '12 at 23:11

jQuery Hash Detection Internet Explorer

1 Answers1