twitter-bootstrap 在 div 之间动态更改页面内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18116526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically change page content between divs?
提问by Syrne
I am looking for a way to change a single pages content instead of redirecting a user to a new page using jQuery or anything similar. I am quite new to scripting, so help would be greatly appreciated.
我正在寻找一种方法来更改单个页面的内容，而不是使用 jQuery 或任何类似的东西将用户重定向到新页面。我对脚本很陌生，因此非常感谢您的帮助。
I've gone ahead and created a quick mock up in jsFiddle that demonstrates the basic layout of the site and the content that I'd like to change when a user requests a different page:
我已经在 jsFiddle 中创建了一个快速模型，它演示了站点的基本布局以及当用户请求不同的页面时我想要更改的内容：
http://jsfiddle.net/Syrne/8pMnR/
http://jsfiddle.net/Syrne/8pMnR/
CODE:
代码：
HTML:
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>© 2013</p>
</div>
</div>
CSS:
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;
}
}
As you can see, the middle area of the site is where the action should be happening. the rest (nav bar and footer) should stay fixed.
如您所见，站点的中间区域是应该发生操作的地方。其余部分（导航栏和页脚）应保持固定。
For reference, I've pulled up this guidethat utilizes jQuery, "Modernizr" and HTML5's history API in order to preserve unique URL's for each change of content; this is exactly what I want to do, but I cannot seem to wrap my head around how to make it work for my current design. Any help is greatly appreciated, even a light hint to help me on my way. I am very new to web design/development and have a LOT to learn.
作为参考，我查阅了本指南，该指南利用 jQuery、“Modernizr”和 HTML5 的历史 API，以便为每次内容更改保留唯一的 URL；这正是我想要做的，但我似乎无法理解如何使其适用于我当前的设计。非常感谢任何帮助，即使是在我的路上帮助我的轻微提示。我对网页设计/开发很陌生，有很多东西要学。
回答by Konsole
All you need is AJAX. The basic procedure may be:
您只需要AJAX. 基本程序可能是：
- Attach a
clickevent on navigationlinks. - When user clicks the link,
prevent default actionand get what is inhref. - Use
AJAXto get contents from thatlink. - Update your main content div with new content.
click在导航上附加一个事件links。- 当用户单击链接时，
prevent default action并获取href. - 用于
AJAX从中获取内容link。 - 使用新内容更新您的主要内容 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
}
});
});
Edit Based on Comment
根据评论编辑
There is a problem with your implementation. You are targeting $('#link1')which doesn't exists. Change the links of your navigations like this:
你的实现有问题。您的目标$('#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>
Then use the following code.
然后使用下面的代码。
$(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);
}
});
});
});
Or, if you want your current implementation to work provide idto your anchortag like this
或者，如果您希望当前的实现能够像这样提供id给您的anchor标签
<a href="#" id="link1">
Also be sure to wrap your script inside $(document).ready(function(){})
还要确保将您的脚本包装在里面 $(document).ready(function(){})
回答by Michael B.
I believe you should check jQuery Mobile,it will handle AJAX loaded pages and preserving the URL
我相信你应该检查 jQuery Mobile，它会处理 AJAX 加载的页面并保留 URL
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
