Jquery code doesn't work well on firefox/ie

Question

I have the following code (on jsfiddle here)

$(function(){

    var $container = $('#gallery');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    var $optionSets = $('ul.nav'),
        $optionLinks = $optionSets.find('a');

    $optionLinks.click(function () {
        var $this = $(this);
        if ($this.hasClass('selected')) {
            return false;
        }
        var $optionSet = $this.parents('ul.nav');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
    });


    // HASH HISTORY WITH JQUERY BBQ

    $('ul.nav a').click(function () {
        // get href attr, remove leading #
        var href = $(this).attr('href').replace(/^#/, ''),
            // convert href into object
            // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
            option = $.deparam(href, true);
        // set hash, triggers hashchange on window
        $.bbq.pushState(option);
        return false;
    });

    //just a function to quickly add and remove .selected
    function changeSelectedLink($elem) {


        $elem.addClass('selected');
    }

    $(window).bind('hashchange', function (event) {
        //checks if there is a hash in the url and puts hashes in hashOptions
                            $(".selected").removeClass("selected");

        var hashOptions = window.location.hash ? $.deparam.fragment(window.location.hash, true) : {}, options = $.extend({}, hashOptions);
        $('#gallery').isotope(options);
        var hrefObj, hrefValue, $selectedLink;
        //go over each hashOption and convert it to a variable 

        for (var key in options) {
            hrefObj = {};
            hrefObj[key] = options[key];
            hrefValue = $.param(hrefObj);
            $selectedLink = $('ul.nav').find('a[href="#' + hrefValue + '"]');
            changeSelectedLink($selectedLink);
        }
    }).trigger('hashchange'); //this continues the hashchange event
});

This code works well on chrome. But in firefox 22 and ie 10 it behaves strange

When clicking on colors it all works. When going back, the code should behave in such a way that .selected is cleared and only added to the correct node. The result is that the .selected is cleared in the DOM (if I inspect the element) but on screen it doesn't. The class is removed once I click anywhere on the screen.

Furthermore, if I debug with firebug,etc this doesn't happen!

Am I missing anything in the code?

Answer 1

remove a:focus in css or add blur to $('.selected').removeClass('selected').blur(); in hashchange

http://jsfiddle.net/Q6SbU/7/

there is only one .selected