Appending an ID to the end of a URL

Question

I managed to get the appending of the hash tag to the URL depending on the ID, however, it is not properly hiding/showing the DIVs within IE8. Also, I noticed that the part of the jQUery that adds the .selected class is not functioning properly. Any change someone can lend me some expertise? It works perfectly fine in Chrome/Firefox/Safari, but, the dreaded IE is being a stubborn mule!

Thanks ahead of time!

P.S. - I used the method outlined here: jqueryfordesigners.com/enabling-the-back-button/

Here is the code I'm using as well:

    jQuery(window).load(function () {
        var selectCont = jQuery('.selectCont > div');
        selectCont.hide().filter(':first').show();

        jQuery(window).bind('hashchange', function () {
        var hash = window.location.hash || '#clinicalfaculty';

        selectCont.hide();
        selectCont.filter(hash).show();
            e.preventDefault();

        jQuery('#selectBtn ul.btnNav a').removeClass('selected');
        jQuery('a[hash=' + hash + ']').addClass('selected');
        });
    jQuery(window).trigger('hashchange');
    });

@Dan Puzey --

Sorry about that! I'm new to stackoverflow.

The base code that I'm working with can be found here: massgeneral.org/emergencymedicine/ourdoctors/EM-Listing.htm

The ID(s) that I'm depending on are: #clinicalfaculty, #researchfaculty and #fellows which can be found on lines 34-36 of the HTML I just referred. When a user clicks one of the buttons (with the IDs), the JavaScript hides the other two DIVs associated with the IDs and shows the ID which the user clicked. At the same time, the hashtag with the ID name is appended to the user for "Back" capabilities. As you can see, within Firefox, it works exactly the way it should. However, when you load it within IE8, it does not properly work.

In terms of the .selected, I wanted to be able to have the class .selected apply to the button that is clicked to apply a custom style to visual notify the user that the button is the selected and the content associated with that button is currently being displayed. However, .selected is not properly being added as a class. I'm not exactly sure why either.

My initial jQuery I wrote to operate the filtering properly is below. However, it did not append the # hashtag and did not support the usage of the "Back" button.

var index = 0, hash = window.location.hash;
    jQuery(window).load(function(){
        jQuery('#selectBtn a').click(function(e) {
        jQuery('.selectCont > div').hide();
        jQuery(this.hash).show();
            e.preventDefault(); //to prevent scrolling
    });
});

Reference Link

Answer 1

Not sure if this is the fix but it appears that you've forgotten to pass the event argument into the haschange function. Change the signature to this.

jQuery(window).bind('hashchange', function (e) { ... });