Question

我正在尝试设置一个基本站点，该站点将内容从另一个页面的同一部分调用到一个页面的特定部分，并更新该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.


});

Answer 1

使用.delegate()时，绑定的元素必须是静态的，动态元素的选择器位于参数中。 $("nav").delegate()适用于第一级导航，但发送级导航是动态加载的，因此绑定不适用于此。您需要绑定到静态元素：

$mainContent.on("click", "nav a", function() {
    ...
});

BTW，.delegate()自jQuery 1.7起已被.on()取代。它们是等价的，但参数的顺序不同。

从动态内容中替换动态内容

1 个答案: