Question

当我点击链接时，我希望我网站上的容器内容发生变化。这有点难以解释所以我已经包含了一张图片：

http://img810.imageshack.us/img810/5128/17581443.jpg

基本上我想在点击左侧链接时更改大容器（右侧）。显然，我可以通过为每个链接创建一个单独的页面来实现类似的效果，并且只链接到这些页面，但看起来它们比为这么少量的更改加载一个全新的页面更有效。

我的目标是网站性能，所以如果要改变某些内容只会涉及大量脚本或损害网站的可靠性，我只会将链接直接转到页面上。提前谢谢。

Answer 1

您只需将区域设置为div。

假设我们称之为“内容”：

<div id="content">
   The content will go here
</div>

然后在按钮上激活JavaScript代码以调用包含数据的页面，并将其发布在该div中：

    function getHTML(pageName, elementID) {
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById(elementID).innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", pageName, true);
        xmlhttp.send();
        return xmlhttp;
    }

function changeContent1() {
getHTML("content1.html","content");
}

按钮当然应该调用该功能：

<button type="button" onclick="changeContent1()">changeContent1</button>

但您应该明白，您将无法使用浏览器的后退按钮撤消HTML更改。

Answer 2

这样做的最佳方法是使用AJAX（http://en.wikipedia.org/wiki/Ajax_(programming)）。实现这一目标的最佳方法是使用一个javascript库，它可以为您带走大部分艰苦的工作，并提供更浅的学习曲线。我个人推荐jquery（http://jquery.com/），在这种情况下你需要查看load()函数 - http://api.jquery.com/load/

如何通过链接更改网站的一部分？

2 个答案: