在 div 之间动态更改页面内容？

Question

我正在寻找一种方法来更改单个页面的内容，而不是使用 jQuery 或类似的东西将用户重定向到新页面。我是脚本新手，非常感谢您的帮助。

我已经在 jsFiddle 中创建了一个快速模型，演示了网站的基本布局以及当用户请求不同页面时我想更改的内容：

http://jsfiddle.net/Syrne/8pMnR/

代码：

HTML：

<div class="container">
    <div class="navbar">
        <div id="navWrap" class="container">
            <div class="nav-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a>

                    </li>
                    <li><a href="#">Link 1</a>

                    </li>
                    <li><a href="#">Link 2</a>

                    </li>
                    <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop <b class="caret"></b></a>

                        <ul class="dropdown-menu">
                            <li>
                                <!-- DoW -->
                                <li class="dropdown-submenu">   <a tabindex="-1" href="#">Menu</a>

                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="#">Option 1</a>

                                        </li>
                                        <li><a tabindex="-1" href="#">Option 2</a>

                                        </li>
                                        <li><a tabindex="-1" href="#">Option 3</a>

                                        </li>
                                    </ul>
                                </li>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <hr></hr>
    <div id="main_page">
        <p><b>MAIN CONTENT</b></p>
        <p>This content should change dynamically when a user follows a page link.</p>
        <hr></hr>
    </div>
    <div class="footer">
        <p>&copy; 2013</p>
    </div>
</div>

CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}
#main_page {
    text-align: center;
}

.footer {
    text-align: center;
}

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block;

  vertical-align: top;
}

#navWrap {
    text-align: center;
}
}

如您所见，网站的中间区域是操作应该发生的地方。其余部分（导航栏和页脚）应保持固定。

作为参考，我提取了this guide，它利用 jQuery、“Modernizr”和 HTML5 的历史 API 来为每次内容更改保留唯一的 URL；这正是我想要做的，但我似乎无法思考如何让它适用于我当前的设计。非常感谢任何帮助，即使是在路上帮助我的轻微提示。我对网页设计/开发非常陌生，还有很多东西要学。

Answer 1

您只需要AJAX。基本程序可能是：

1. 在导航links 上附加click 事件。
2. 当用户单击链接时，prevent default action 并获取 href 中的内容。
3. 使用AJAX 从link 获取内容。
4. 用新内容更新您的主要内容 div。

EG：

$('nav li').on('click', 'a', function(e){ //step 1
  e.preventDefault(); //prevent default action, step2
  var url = $(this).attr('href'); //get the url, step 2

  $.ajax({ //step 3
    url: url,
    //your other options
    success: function(response){ //on success
      $('YOUR MAIN DIV').html(response); //update your div, step 4
    }
  });
});

根据评论编辑

您的实施存在问题。您的目标是不存在的 $('#link1')。像这样更改导航的链接：

<ul class="nav navbar-nav">
   <li><a href="#">Home</a></li>
   <!-- The script below will get the data from href attribute of anchor tag -->
   <!-- So your href attribute should target file you want to load your content from -->
   <li><a href="external.html">Link 1</a></li> 
   <li><a href="external2.html">Link 2</a>
   ...
</ul>

然后使用下面的代码。

$(document).ready(function(){
    $("ul.nav li a").click(function(e){ 
        e.preventDefault();
        var url = $(this).attr('href'); //get the link you want to load data from
        $.ajax({ 
         type: 'GET',
         url: url,
         success: function(data) { 
            $("#main_page").html(data); 
        } 
       }); 
     });
  });

或者，如果您希望当前的实现正常工作，请像这样将 id 提供给您的 anchor 标记

<a href="#" id="link1">

还要确保将您的脚本包含在 $(document).ready(function(){}) 中

Answer 2

我相信你应该检查 jQuery Mobile，它会处理 AJAX 加载的页面并保留 URL

http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html