在JavaScript (.js)文件中包含HTML

Question

HTML

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

Navigation.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页，那么Nav上的第2页将用该类高亮显示

这很好，但我必须从PHP转到JavaScript。

所以HTML行变成

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

我可以通过window.location.href获得当前的URL，如何将其传递给JS，以及如何在JS (当前的PHP )中包含这些内容？

我已经将所有的网络链接放在JS文件中的Array中。那么，接下来我要做什么来实现我使用PHP和HTML实现的相同的目标，但是使用JavaScript和HTML。

我只需要导入Nav菜单并使用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>');