我正在尝试设置一个基本站点,该站点将内容从另一个页面的同一部分调用到一个页面的特定部分,并更新该URL而不重新加载常用元素。
我一直在试用去年初更新的CSS-Tricks example并且它作为单级导航工作正常,但我想做的是将辅助导航调用到动态内容区域,然后链接到子页面。因此,辅助导航将新内容调用到当前占用的同一部分。
问题是辅助导航会在每次单击时断开脚本,从而导致整页重新加载。不是每次,每隔一个时间。我猜想每次激活辅助导航时都会出现一些在true和false之间切换的情况,但我的js技能缺乏,而且我常用的摆弄代码的方法直到它以某种方式工作还没有完成。
如果有人了解为什么会发生这种情况以及如何解决这个问题,我们将非常感激。我有一个测试示例设置here,如果有人想要检查它。
父页面,其中“guts”是内容替换的目标div:
<header>
<nav>
<ul>
<li><h2><a href="index.html">Home</a></h1></li>
<li><h2><a href="about.html">About</a></h1></li>
<li><h2><a href="contact.html">Contact</a></h1></li>
</ul>
</nav>
</header>
<section id="main-content">
<div id="guts">
<h1>Landing page with sub-navigation. Nav bg is gray on page load.</h1>
<nav id="sub-nav">
<ul>
<li><h3><a href="example1.html">Sub-Nav Link</a></h3></li>
<li><h3><a href="example2.html">Other Sub-Nav Link</a></h3></li>
</ul>
</nav>
</div>
</section>
子页面:
<header>
<nav id="sub-one">
<ul>
<li><h2><a href="index.html">Home</a></h1></li>
<li><h2><a href="about.html">About</a></h1></li>
<li><h2><a href="contact.html">Contact</a></h1></li>
</ul>
</nav>
</header>
<section id="main-content">
<div id="guts">
<h1>First sub-page via sub-nav. If top nav bg changed to green, the whole page was reloaded.</h1>
<nav id="sub-nav">
<ul>
<li><h3><a href="example1.html">Sub-Nav Link</a></h3></li>
<li><h3><a href="example2.html">Other Sub-Nav Link</a></h3></li>
</ul>
</nav>
</div>
</section>
JS:
$(function() {
if(Modernizr.history){
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
$el;
$("nav").delegate("a", "click", function() {
_link = $(this).attr("href");
history.pushState(null, null, _link);
loadContent(_link);
return false;
});
function loadContent(href){
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(href + " #guts", function() {
$mainContent.fadeIn(200);
$("nav a").removeClass("current");
console.log(href);
$("nav a[href$="+href+"]").addClass("current");
});
});
}
$(window).bind('popstate', function(){
_link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
loadContent(_link);
});
} // otherwise, history is not supported, so nothing fancy here.
});
答案 0 :(得分:0)
使用.delegate()
时,绑定的元素必须是静态的,动态元素的选择器位于参数中。 $("nav").delegate()
适用于第一级导航,但发送级导航是动态加载的,因此绑定不适用于此。您需要绑定到静态元素:
$mainContent.on("click", "nav a", function() {
...
});
BTW,.delegate()
自jQuery 1.7起已被.on()
取代。它们是等价的,但参数的顺序不同。