0

好吧，所以我已经坚持了一段时间..我看过教程，但我不明白这是如何工作的......

这是网站

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

这是代码：

    <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');

});

这对我来说真的很重要，我一直在努力做到这一点！如果有人有任何建议或解决方案，请帮助我！

4

1 回答 1

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 之类的插件

希望这对您有所帮助。

于 2013-07-30T04:04:16.997 回答