当您单击链接(a 标签)时,大多数网站如何仅加载页面的中间部分?如果这是通过 AJAX 完成的,那么如何将 URL 更改为 a 标记中给定的 href 呢?我知道我可以使用 .load 函数,但这不会将 URL 更改为链接的 href 中给出的 URL。
最佳答案
如果链接上的点击内容被加载到网站的某个内部部分,通常会通过 AJAX 异步获取并注入(inject)到 DOM 结构中。在此过程中,网站的 URL 不会更改。
考虑以下具有三个不同链接的示例。使用 jQuery,对于每个链接,默认导航被禁用,而是将内容注入(inject)到主要内容 div
中。
HTML
<nav>
<a href="some href 1">Link 1</a> |
<a href="some href 2">Link 2</a> |
<a href="some href 3">Link 3</a>
</nav>
<div id="main"></div>
JavaScript
$(document).ready(function() {
$('nav a').click(function(event) {
event.preventDefault(); // Prevent the default link navigation
// This is the point where you could fetch content (for instance
// from the href of the clicked link). For this example we just
// generate a string containing the href.
var content = 'Content for ' + $(this).html();
$('#main').html(content); // Inject the content
});
});
查看 JSFiddle 上的现场演示.
关于javascript - 单击标签时仅加载中间部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25585794/