使用javascript更改页面内容isn'；我不想再回到主页

我的网站由6个html文件组成，1个是包含主页内容的索引页，还有一个名为homepage的文件，我使用它再次加载主页内容，导航菜单包含5个用于导航到页面的元素

<div class="navigators">
   <ul class="tabs">
      <li class="active"><a href="#" data-f="homepage">Home</a></li>
      <li id="tab1"><a href="#" data-f="organizations">Organizations</a></li>
      <li id="tab2"><a href="#" data-f="takeaction">Take Action</a></li>
      <li id="tab3"><a href="#" data-f="resources">Resources</a></li>
      <li><a href="#" data-f="contact">Contact</a></li>
    </ul>
</div>

在主页上，我有一些部分将网站内容更改为（组织-采取行动-资源）页面

当我第一次单击其中一个时，它会成功工作并加载index.html内容，但当我从导航菜单中单击“主页”并单击其中一个时，它就不工作了

以下是Javascript代码：

[].forEach.call(document.querySelectorAll('.content a' ), function(ele) {
        ele.addEventListener('click', function(e) {

            var file = ele.getAttribute('data-file')+'.html';
            var include = document.getElementById('content');

        // Add/Remove 'active' class to/from <li> in the navigation menu
        document.querySelector(".tabs li.active").classList.remove("active");
        var selected = ele.getAttribute('data-id');
        document.getElementById(selected).classList.add("active");

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
               if (xmlhttp.status == 200) {
                   include.innerHTML = xmlhttp.responseText;

               }
               else if (xmlhttp.status == 400) {
                  alert('There was an error 400');
               }
               else {
                   alert('something else other than 200 was returned');
               }
            }
        };

        xmlhttp.open("GET", file, true);
        xmlhttp.send();



        });

    });

[].forEach.call（document.queryselectoral（'.content a'），函数（ele）{
ele.addEventListener（'click'，函数（e）{
var file=ele.getAttribute（'data-file'）+'.html'；
var include=document.getElementById（'content'）；
//在导航菜单中的
中添加/删除“活动”类
document.querySelector（“.tabs li.active”）.classList.remove（“active”）；
所选变量=ele.getAttribute（'data-id'）；
document.getElementById（选中）.classList.add（“活动”）；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
如果（xmlhttp.readyState==XMLHttpRequest.DONE）{//XMLHttpRequest.DONE==4
if（xmlhttp.status==200）{
include.innerHTML=xmlhttp.responseText；
}
else if（xmlhttp.status==400）{
警报（“出现错误400”）；
}
否则{
警报（“返回了200以外的内容”）；
}
}
};
open（“GET”，file，true）；
xmlhttp.send（）；
});
});

以下是网站：

---

要了解我的意思，请单击页面末尾的一个

元素（组织-资源-采取行动），它将加载已单击的内容，然后从导航菜单中单击主页，然后再次尝试单击其中一个

元素，看看会发生什么，没有任何事情会像没有js代码一样发生，它甚至没有显示错误

问题在于单击事件侦听器

您有一组侦听器，用于更改

活动的
类

// Add/Remove 'active' class to/from <li> in the navigation menu
    [].forEach.call(document.querySelectorAll('.tabs li'), function(el) {
        el.addEventListener('click', function(e) {
            document.querySelector(".tabs li.active").classList.remove("active");
            el.classList.add("active");
        });
    });

由于
.tabs li
元素包含
a
标记，因此用户可以单击选项卡，而无需触摸链接，在不更改内部HTML的情况下进行样式更改

[].forEach.call(document.querySelectorAll('.tabs li a'), function(ele) {
        ele.addEventListener('click', function(e) {

            var file = ele.getAttribute('data-f')+'.html';
            var include = document.getElementById('content');

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
                   if (xmlhttp.status == 200) {
                       include.innerHTML = xmlhttp.responseText;

                   }
                   else if (xmlhttp.status == 400) {
                      alert('There was an error 400');
                   }
                   else {
                       alert('something else other than 200 was returned');
                   }
                }
            };

            xmlhttp.open("GET", file, true);
            xmlhttp.send();


        });
    });

将这些更改包装到单个事件侦听器中应该可以解决它。
问题在于单击事件侦听器

您有一组侦听器，用于更改
活动的
类

// Add/Remove 'active' class to/from <li> in the navigation menu
    [].forEach.call(document.querySelectorAll('.tabs li'), function(el) {
        el.addEventListener('click', function(e) {
            document.querySelector(".tabs li.active").classList.remove("active");
            el.classList.add("active");
        });
    });

由于
.tabs li
元素包含
a
标记，因此用户可以单击选项卡，而无需触摸链接，在不更改内部HTML的情况下进行样式更改

[].forEach.call(document.querySelectorAll('.tabs li a'), function(ele) {
        ele.addEventListener('click', function(e) {

            var file = ele.getAttribute('data-f')+'.html';
            var include = document.getElementById('content');

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
                   if (xmlhttp.status == 200) {
                       include.innerHTML = xmlhttp.responseText;

                   }
                   else if (xmlhttp.status == 400) {
                      alert('There was an error 400');
                   }
                   else {
                       alert('something else other than 200 was returned');
                   }
                }
            };

            xmlhttp.open("GET", file, true);
            xmlhttp.send();


        });
    });

将这些更改包装到单个事件侦听器中应该可以修复它。
我不是说标题上的导航器，而是说标题上包含
元素的
homepage@guyyoget ,当我点击其中一个包含
元素的
时，它应该删除/添加活动类并加载它的内容，这种情况发生在从index.html中点击它时，但是当我点击导航菜单上的主页并点击其中一个
元素时，这种情况不会发生。。。好的，我发现了一个不同的bug：）。我不是说标题上的导航器，我是说标题上包含
元素的
homepage@guyyoget ,当我点击其中一个包含
元素的
时，它应该删除/添加活动类并加载它的内容，这种情况发生在从index.html中点击它时，但是当我点击导航菜单上的主页并点击其中一个
元素时，这种情况不会发生。。。好的，我发现了另一个bug:）。