我正在使用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>
有什么建议吗?