Использование HTML Включить для ссылок навигации по сайту - PullRequest
Новая
       13

Использование HTML Включить для ссылок навигации по сайту

0 голосов
/ 11 апреля 2020

Я пытаюсь создать простой офлайн-сайт (предоставленный через Dropbox), который послужит базой знаний для моей команды. Мне бы хотелось получить ссылки навигации по сайту на боковой панели из одного файла, поскольку члены группы будут постоянно обновлять его и не хотят, чтобы они обновляли его на десятках страниц.

I ' Я вижу, что решение HTML может работать, но я не могу заставить его работать, я тестирую с простой гиперссылкой в ​​моем файле навигации: 

<a href="new_pg.html">How to Add a New Page</a>

Есть идеи, что я делаю не так? 

<!DOCTYPE html>
<html>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>

<body>

<div class="sidenav">
<div class="nav-divider-line"></div>

<div w3-include-html="navigation.html"></div> 

<script>
includeHTML();
</script>


<div class="nav-divider-line"></div>
  
  
</div>

<div class="main">
Main Content
</div>


<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}
</script>


</body>
</html>
...