Javascript 单页Web应用程序菜单选择

我正在使用Bootstrap开发一个单页web应用程序前端。我在页面的一侧有一个菜单，我想突出显示选中的任何项目

HTML:

我在网上搜索了一些如何做到这一点，但我只找到了一些资源，这些资源为每个菜单项使用单独的.html页面实现了一个解决方案。有没有一种方法可以使用JavaScript和当前的active.html页面来实现这一点

下面是我尝试过的一个jS代码段，但它无法取消选择其他项目：

<script>
  var menuArr = document.getElementsByTagName("li");
  var prevLI = "";
  for (var i = 0; i < menuArr.length; i++) {
    menuArr[i].onclick = function() {
      if (prevLI != "" && prevLI != this) {
        prevLI.className = "";
      }
      this.className = "active";
      prevLI = this;
    }
  }
</script>

var menuArr=document.getElementsByTagName（“li”）；
var prevLI=“”；
对于（变量i=0；i

嘿，我使用您的代码在JSFIDLE上创建了一个示例：-

 var menuArr = document.getElementsByTagName("li");
 var prevLI = document.getElementsByClassName('active');
 if (prevLI)
     prevLI = prevLI[0];
 for (var i = 0; i < menuArr.length; i++) {
     menuArr[i].onclick = function() {
         if (prevLI != "" && prevLI != this) {

             prevLI.className = "";
         }
         this.className = "active";
         prevLI = this;
     }
 }

var menuArr=document.getElementsByTagName（“li”）；
var prevLI=document.getElementsByClassName（'active'）；
if（prevLI）
prevLI=prevLI[0]；
对于（变量i=0；i

工作示例：

---

谢谢

刚刚添加了一些jS:）我将从所有导航列表项中删除活动类，然后将该类重新应用回单击的类。对不起，我不在公司附近，否则我会举个例子。谢谢你的例子！

 var menuArr = document.getElementsByTagName("li");
 var prevLI = document.getElementsByClassName('active');
 if (prevLI)
     prevLI = prevLI[0];
 for (var i = 0; i < menuArr.length; i++) {
     menuArr[i].onclick = function() {
         if (prevLI != "" && prevLI != this) {

             prevLI.className = "";
         }
         this.className = "active";
         prevLI = this;
     }
 }