window.location.hash没有刷新

时间:2014-02-03 16:19:43

标签: jquery ajax hash

我正在使用jQuery脚本动态地将内容加载到div。当我点击链接时,新内容会淡入,并且网址会更改为index.html#first-item,index.html#second-item等。

现在,我希望能够根据URL哈希影响元素。我有以下一段代码可以正常工作,但只有在我刷新页面时才有效,而不是在新内容淡入时。

   if (window.location.hash == "#first-item") {
        $("#main-nav").addClass("test");
    }

Ajax jQuery代码

jQuery(document).ready(function($) {
    $('.more').on('click', function() {
         $("html, body").animate({ scrollTop: 0 }, "250");
        var href = $(this).attr('href');
        if ($('#ajax').is(':visible')) {
            $('#ajax').css({ display:'block' }).animate({ height:'100%' }).empty();
        }
        $('#ajax').css({ display:'block' }).animate({ height:'100%' },function() {
            $('#ajax').load('slide-fade-content.html ' + href, function() {
                $('#ajax').hide().fadeIn('slow');
            });
        });
    });
});

slide-fade-content.html标记看起来像这样

<div id="section-one">
content
</div>

<div id="section-two">
content
</div>


<div id="section-three">
content
</div>

主页面标记看起来像这样

<nav id="main-nav">
<ul>
<li><a class="more" href="#first-item">First Item</a></li>
<li><a class="more" href="#second-item">Second Item</a></li>
<li><a class="more" href="#third-item">Third Item</a></li>
</ul>
</nav>

有什么建议吗?

0 个答案:

没有答案