javascript - 如何使用基于当前 url 的 javascript 在 jsp 文件中设置 div 项的活动菜单状态？

Question

导航栏如下所示：

我在所有其他 jsp 文件中使用的 menu.jsp 代码在任何地方显示导航栏菜单：

menu.jsp 文件中的 css 代码

    .topnav {
      overflow: hidden;
      background-color: #e9e9e9;
    }
    
    .topnav a {
      float: left;
      display: block;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a.active {
      background-color: #2196F3;
      color: white;
    }
    

menu.jsp 文件中的 html 代码

  <div class="topnav">
  <a class="btn active" href="${pageContext.request.contextPath}/">Home</a>
  <a class = "btn" href="${pageContext.request.contextPath}/productList">Product List</a>
  <a class = "btn" href="${pageContext.request.contextPath}/userInfo">My Account Info</a>
    <a class = "btn" href="${pageContext.request.contextPath}/login">Login</a>

</div> 

javascript代码：

<script>
var btnContainer = document.getElementsByClassName("topnav");

//Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

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

我已经在 Stackoverflow 和其他来源上尝试了几乎所有可用的解决方案，但到目前为止，它们都没有奏效。谁能告诉我如何解决这个问题？

标签： javascripthtmlcssjsp

Answer 1

您可以使用forEach循环a标签并删除类，即：active然后检查是否href匹配当前 url，然后将活动类添加到该a标签。

演示代码：

// var url = window.location.href;
var url = 'https://stacksnippets.net/login' //just for demo..
//loop through `a` remove active class from all if any 
document.querySelectorAll('.topnav a').forEach(function(el) {
  el.classList.remove("active")
});
document.querySelectorAll('.topnav a').forEach(function(el) {
  //check if href matches url ..add active class theere
  if (el.getAttribute('href') === url) {
    el.classList.add("active")
  }
})

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topnav">
  <a class="btn active" href="https://stacksnippets.net/">Home</a>
  <a class="btn" href="https://stacksnippets.net/productList">Product List</a>
  <a class="btn" href="https://stacksnippets.net/userInfo">My Account Info</a>
  <a class="btn" href="https://stacksnippets.net/login">Login</a>

</div>