Jquery代码没有'在firefox/ie上运行不好

Jquery code doesn't work well on firefox/ie

本文关键字:ie 运行 firefox 代码 Jquery      更新时间:2023-09-26

我有以下代码(在jsfiddle上)

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

此代码在chrome上运行良好。但在firefox 22和ie 10中,的行为很奇怪

当点击颜色时,一切都正常。返回时,代码的行为方式应该是清除.selected并仅将其添加到正确的节点。结果是.selected在DOM中被清除(如果我检查元素),但在屏幕上它没有。一旦我点击屏幕上的任何位置,该类就会被删除。

此外,如果我使用firebug等进行调试,则不会发生这种情况!

代码中有遗漏吗?

删除css中的a:focus或在hashchange 中将blur添加到$('.selected').removeClass('selected').blur();

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

只有一个.selected