Javascript 导航器在放置JS后停止工作

更新：

您好，我创建了一个导航栏，它将不同的页面加载到一个div中。这是导航栏的源代码：

<div id="navBar">
<ul>
    <li><a href="#" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Home</a></li>
    <li><a href="about.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Staff</a></li>
    <li><a href="goodies.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Goodies</a></li>
    <li><a href="stuff.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Events</a></li>
    <li><a href="#/contact.php" onClick="document.getElementById('bottom').innerHTML = loadPage('load.php');">News</a></li>
    <li><a href="#" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Games Center</a></li>
    <li><a href="phptesting.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Habbo</a></li>
</ul>

现在，这两个代码所做的切换是当文本的一个例如（Home）被点击时，在文本加载的底部Div之间。当我将此代码放在此处以在页面加载时加载文本时：

<script>
function loadXMLDoc(filename) {
    var xmlhttp;
    if (window.XMLHttpRequest)  {
      xmlhttp=new XMLHttpRequest();
    }
    else {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        after_load_function(xmlhttp.responseText);
      }
    }
    xmlhttp.open("GET",filename,true);
    xmlhttp.send();
    }

    function after_load_function(responseText) {
      document.getElementById("right").innerHTML = responseText;
    }

    window.onload = function() {
      loadXMLDoc("welcome.html");
    }
</script> 

函数loadXMLDoc（文件名）{
var-xmlhttp；
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}
否则{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
后加载函数（xmlhttp.responseText）；
}
}
open（“GET”，文件名，true）；
xmlhttp.send（）；
}
加载函数后的函数（responseText）{
document.getElementById（“右”）.innerHTML=responseText；
}
window.onload=函数（）{
loadXMLDoc（“welcome.html”）；
}

---

当我放置它时，会导致页面不再加载。但是，如果我删除它，它就会开始工作，有什么想法吗？

为什么不使用jQuery来支持跨浏览器？本机js很好，但可能不适合跨浏览器。尝试使用jQuery查看您的问题是否可以解决。

为什么不使用jQuery使其支持跨浏览器？本机js很好，但可能不适合跨浏览器。尝试使用jQuery查看您的问题是否可以解决。

loadPage（）函数在哪里定义？loadPage（）函数是否调用loadXMLDoc（）函数？若有,则:

1-我注意到您的ajax回调函数执行以下操作：

function after_load_function(responseText) {
    document.getElementById("right").innerHTML = responseText;
}

2-但是，在loadPage（）函数中，您还进行了如下赋值：

onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');"

function loadPage(pageToLoad) {
    $.ajax({
        url: pageToLoad,
        complete: function(res) {
            $('#bottom').html(res.responseText);
        }
    });
}

onClick="loadPage('hello-world.html');"

但是，在第一次分配中，“right”的html内容已更改。不再存在“底部”，因此在第二次分配中将引发异常

<div id="right">
<a id="bottom">
</a></div>

然后像这样打电话：

onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');"

function loadPage(pageToLoad) {
    $.ajax({
        url: pageToLoad,
        complete: function(res) {
            $('#bottom').html(res.responseText);
        }
    });
}

onClick="loadPage('hello-world.html');"

要定义的loadPage（）函数在哪里？loadPage（）函数是否调用loadXMLDoc（）函数？若有,则:

1-我注意到您的ajax回调函数执行以下操作：

function after_load_function(responseText) {
    document.getElementById("right").innerHTML = responseText;
}

2-但是，在loadPage（）函数中，您还进行了如下赋值：

onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');"

function loadPage(pageToLoad) {
    $.ajax({
        url: pageToLoad,
        complete: function(res) {
            $('#bottom').html(res.responseText);
        }
    });
}

onClick="loadPage('hello-world.html');"

但是，在第一次分配中，“right”的html内容已更改。不再存在“底部”，因此在第二次分配中将引发异常

<div id="right">
<a id="bottom">
</a></div>

然后像这样打电话：

onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');"

function loadPage(pageToLoad) {
    $.ajax({
        url: pageToLoad,
        complete: function(res) {
            $('#bottom').html(res.responseText);
        }
    });
}

onClick="loadPage('hello-world.html');"

---

好的-如果您推荐我使用jQuery，那么让我们从基础开始吧，没问题。一个问题是，你可能必须告诉我源代码，因为jQuery对我来说是全新的。忘掉jQuery，只需关注我文章的第一部分。这对您的情况有意义吗？加载函数（responseText）{document.getElementById（“right”）.innerHTML=responseText；}之后的函数与onClick=“document.getElementById（'bottom'）.innerHTML=loadPage（'hello-world.html'）；”不同。有两个不同的和做不同的事情。在你的page_load事件中，你调用你的loadXMLDoc来加载welcome.html，这个调用将删除“bottom”元素&可能会导致一个异常。对-让我们从基础开始，如果你推荐我使用jQuery，没有问题。一个问题是，你可能必须告诉我源代码，因为jQuery对我来说是全新的。忘掉jQuery，只需关注我文章的第一部分。这对您的情况有意义吗？加载函数（responseText）{document.getElementById（“right”）.innerHTML=responseText；}之后的函数与onClick=“document.getElementById（'bottom'）.innerHTML=loadPage（'hello-world.html'）；”不同。在page_load事件中，您调用loadXMLDoc加载welcome.html，此调用将删除“bottom”元素并可能导致异常。