Question

好吧，所以我已经坚持了一段时间..我已经看过教程了，我不明白这是怎么回事......

我想在“绿色内容”框中加载“主页”“关于”“联系人”等导航选项。

以下是代码：

    <div id="header">
    <nav>
    <ul>
        <li><a href="content/home.html">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>
</div>  
<div id="banner"></div>
  <div id="container">
  <div id="top">
    <div class="welcome">Welcome to HabShine</div>
  </div>
  <div id="content">
     <section id="main-content">
     <div id="guts"></div>
     </div>
     </section>
  <div id="end"></div>

这是javascript

    $(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $content    = $("#content"),
        baseHeight   = 0,
        $el;

    $content.height($content.height());
    baseHeight = $content.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $content.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };

    });

    $(window).trigger('hashchange');

});

这真的让我感到高兴，我一直在努力做到这一点！如果有人有任何建议或解决方案，请帮助我！

Answer 1

编辑：我已经在函数中添加了e.preventDefault（），否则就是在链接之后。其次，请将此小提琴视为演示，显然目前无法加载内容，但在Chrome或Firefox的控制台中，您应该看到它尝试加载正确的页面。 http://jsfiddle.net/jqUxb/

您可以使用jQuery的.load（）函数将页面加载到div中。

所以你的代码看起来像：

$(document).ready(function(){
   $("nav").delegate("a", "click", function(e) {
      e.preventDefault();
      var menuItem = $(this);
      //remove "current" class
      $("nav a").each(function(){
         $(this).removeClass("current");
      })
      //flag the current menu-item as current:  
      $(menuItem).addClass("current");
      //load the content:
      $('#main-content').load($(menuItem).attr("href"));

   });
});

基本上当你点击链接时，它会抓取被点击的链接的href，ajax会将href中的内容加载到你的div中。

如果你想确保浏览器历史记录仍然可行，我建议你看看一个插件，比如jquery-address

希望这会对你有所帮助。

如何动态加载内容

1 个答案: