Question

我有一个这样的网页link

我想在div中加载点击的页面，我想将浏览器中显示的网址更改为已加载的网页网址，如下所示：

如果用户点击了第1页：页面1将加载到页面div中，并且url应显示为此（例如）：mywebsite.com/page1.html而不是mywebsite.com/index.html 所以在加载页面时应该更改URL。

Answer 1

您无法将网页本身加载到div中。您可以使用AJAX加载页面的内容，然后将其放入div中。在这种情况下，您要加载的页面必须是片段（即，没有DOCTYPE，<html>，<head>或<body>标记。你也可以让它们成为动态页面，这与我对URL的说法一致。

如果你想做AJAX位，你会：

为了简化这个例子，我假设您正在使用jQuery进行AJAX调用。在没有任何第三方库的情况下编写AJAX当然是可能的，但代码更长。如果你想这样做，谷歌很容易获得一个体面的教程。

构建主页

首先，主页面。这将是一个包含您要覆盖的div的整页。为简单起见，我将给它一个名为“content”的ID。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
</head>
<body>
    <div id="content"><a href="page1.html">Go to page 1</a></div>
</body>

content的默认内容只有一个指向page1的链接。

构建页面片段

页面片段可以是任何内容。为简单起见，我们将其称为“page1.html”，它只包含：

 <p>Hello World</p>

覆盖部分/全部锚元素（链接）

现在，我们需要添加一个事件侦听器，以防止在单击链接时发生正常操作。对于此示例，我们将覆盖content中的任何锚点。另外，我们将使用jQuery。

$('#content a').click(function(e) { 
    loadPage($(this).attr('href'));
    e.preventDefault();
}

这有两件事。首先，它调用我们将实现的功能来进行实际加载。然后，它会阻止锚点将它们带到下一页是正常的。

**执行AJAX **

最后一步，我们需要实现loadPage，它会做我们想要的。

function loadPage(url) {
   $.ajax({
       url: url
   }).done(function(data) {
       $('#content').html(data);
   });
}

就是这样。它将获取我们放入锚点的URL，加载该文件（这是我们的页面片段），并在完成后将内容放在content中。

就像我说的，它不会改变URL。要做到这一点，你必须实现传统的动态网页。