尝试在我的布局页面（我的母版页）中的页脚中添加导航栏

Question

试图在我的页脚中添加一个导航栏，该导航栏位于我的布局页面中（我的母版页，所有页面都将继承页脚）。我想将活动页面的图标颜色设置为红色，但我不想为所有页面添加页脚。是否可以从布局页面进行？

这是我在布局页面中编写的代码，当我转到另一个页面时，home1 图标仍然是红色......我正在尝试将当前页面图标设为红色

<footer class="footer">
    <!-- Just an image -->
    <nav class="navbar navbar-light bg-light" id="myDIV">
        <a class="navbar-brand " href="/home1">
            <i class="mynav fas fa-home active"></i>
        </a>
        <a class="navbar-brand" href="/home2">
            <i class="mynav fas fa-shopping-basket"></i>
        </a>
        <a class="navbar-brand" href="/home3">
            <i class="mynav fas fa-cog"></i>
        </a>
        <a class="navbar-brand" href="/home4">
            <i class="mynav fas fa-star"></i>
        </a>
    </nav>
</footer>

//JavaScript

<script type="text/javascript">
 var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("mynav");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
        var current = document.getElementsByClassName("active");
        if (current.length > 0) {
            current[0].className = current[0].className.replace(" active", "");
        }
        this.className += " active";
    });
}

//CSS

 .mynav .active {
 color: black;
 }

 .active, .mynav:hover {
 color: #dc3545;
 }

Answer 1

您可以遍历页脚中的所有锚点，并将它们的href 与当前页面的路径进行比较，并在真实结果上添加类。

const anchors = document.querySelectorAll('#myDIV a');
const currentPage = window.location.pathname;

Array.prototype.forEach.call(anchors, (a) => {
  if (a.getAttribute('href') === currentPage) {
    a.classList.add('active');
  } else {
    a.classList.remove('active');
  }
});