Включить HTML в JavaScript (. js) файл

Question

HTML

<?php $var = 1; include('PHP/NavigationBar.php'); ?>

Навигация. php

<div class="sidenav">

    <h5>JavaScript</h5>

    <button class="w3-button w3-theme w3-block w3-left-align w3-padding-small"
    onclick="myAccFunc('1')"> Main Heading <i class="fa fa-caret-down"></i></button>

      <div id="1" class="w3-blue w3-hide w3-card" >
        <a class="<?php echo (($var==1)?'active':'');?>" href="Page1.php">Page 1</a>
        <a class="<?php echo (($var==2)?'active':'');?>" href="Page2.php">Page 2</a>
        <a class="<?php echo (($var==3)?'active':'');?>" href="Page3.php">Page 3</a>
        <a class="<?php echo (($var==4)?'active':'');?>" href="Page4.php">Page 4</a>
      </div>
</div>

Вот мое меню навигации. В настоящее время всего 4 элемента, а Class = "Active" представляет активную страницу. Так что, если пользователь находится на странице 2, страница 2 на навигационной панели будет выделена этим классом

Это работает совершенно нормально, но у меня есть для перехода от PHP к JavaScript

Таким образом, строка HTML становится

<script type="text/javascript" src="PHP/Navigation.js"></script>

. Я могу получить текущий URL по window.location.href Как передать это в файл JS и как включить содержимое HTML в файл JS (текущий файл PHP)?

Я поместил все веб-ссылки в массив в файле JS. Итак, что мне делать дальше, чтобы добиться того же, чего я достиг, используя PHP и HTML, но с JavaScript и HTML.

Мне просто нужно импортировать навигационное меню и выделить текущий сайт, используя JavaScript

Answer 1

Мне потребовалось время, чтобы понять ваши ожидания, но теперь вот ваш Navigation.js

var activeClass = new Array(4);
if(window.location.href.includes('Page1.php')) {
    activeClass[0] = 'active';
} else if(window.location.href.includes('Page2.php')) {
    activeClass[1] = 'active';
} else if(window.location.href.includes('Page3.php')) {
    activeClass[2] = 'active';
} else if(window.location.href.includes('Page4.php')) {
    activeClass[3] = 'active';
} 
document.write('<div class="sidenav"><h5>JavaScript</h5>'+
    '<button class="w3-button w3-theme w3-block w3-left-align w3-padding-small" onclick="myAccFunc(1)">'+
    ' Main Heading <i class="fa fa-caret-down"></i></button><div id="1" class="w3-blue w3-hide w3-card" >');
document.write('<a class="'+activeClass[0]+'" href="Page1.php">Page 1</a>');
document.write('<a class="'+activeClass[1]+'" href="Page2.php">Page 2</a>');
document.write('<a class="'+activeClass[2]+'" href="Page3.php">Page 3</a>');
document.write('<a class="'+activeClass[3]+'" href="Page4.php">Page 4</a>');
document.write('</div></div>');