使用 javascript 更改页面内容无法再次返回主页

Question

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

<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>

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

<div class="group">
    <a data-id="tab1" data-file="organizations" href="#">
        <img src="images/1-group2.png">
        <h2>Organizations</h2>
    </a>
</div>
<div class="action">
    <a data-id="tab2" data-file="takeaction" href="#">
        <img src="images/1-action.png">
        <h2>Take Action</h2>
    </a>
</div>
<div class="resources">
    <a data-id="tab3" data-file="resources" href="#">
       <h2>Resources</h2>
    </a>    
</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();



        });

    });

这是网站： http://jhtml.aba.ae

要了解我的意思，请单击页面末尾的 <h2> 元素之一（组织 - 资源 - 采取行动），它将加载单击的内容，然后从导航菜单中单击主页并尝试再次点击<h2>元素之一，看看会发生什么，没有js代码一样没有发生，甚至没有显示错误

Answer 1

问题在于点击事件监听器。

您有一组更改 active 类的侦听器

// 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");
        });
    });

其他更改是在更改 innerHtml 的 a 标记上。

[].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();


        });
    });

由于.tabs li元素包含a标签，用户可以点击标签，无需触摸链接，在不改变innerHtml的情况下改变样式。

将这些更改包装到单个事件侦听器中应该可以修复它。