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

【问题标题】：How do I change a portion of my site via links?如何通过链接更改我网站的一部分？
【发布时间】：2011-01-20 20:19:38
【问题描述】：

我希望在单击指向它的链接时更改我网站上容器的内容。这有点难以解释，所以我附上了一张图片：

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

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

我的目标是网站性能，因此，如果仅对那部分进行操纵会涉及大量脚本或损害网站的可靠性，我只会将链接直接转到页面。提前致谢。

【问题讨论】：

那么，您尝试过什么？什么没用？你到底在问什么？
我在问最有效的方法是什么。

标签： javascript html web

【解决方案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 更改。

【讨论】：

这肯定会做我想做的事，但老实说，我认为（无论我用什么方法）它都会涉及到比我能接受的更多的编码。最后，我想我将链接到整个页面。

【解决方案2】：

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

【讨论】：

根据他目前的要求，我觉得这太过分了。如果他有
@Chuck 你的意思是将所有内容加载到一个页面中，然后根据点击的链接切换 display:none/display:block ？
不是所有的内容，导航。这就是我假设他所说的。 “右边的大容器”——右边的容器是导航。