Javascript 如何使用CSS突出显示HTML按钮？

我试图突出显示我的导航菜单（带有下拉菜单）中的“当前页面”

当我有简单的导航链接（使用“”HTML标记构建）时，下面的代码完成了这项工作。我现在正在升级我的导航栏以保留下拉菜单（使用“”HTML标记）

我认为我需要采取类似的方法，为“当前”页面分配一个活动类，但我无法像对“”对象那样解决如何循环“”对象的问题

使用导航栏中的按钮（“”）时，如何在导航栏中动态突出显示当前页面

我在W3上找到了一篇相关文章：但它不适用于我的用例，因为我在不同的URL之间导航

我的代码的简化版本如下所示：

<div class="navigation">

  <a href="index.html">Home</a>
  <a href="page_a.html">Page A</a>

  <div class="dropdown">
    <button class="dropbtn" onclick="location.href='page_b.html'" type="button"> Page B</button>
    <div class="dropdown-content">
      <a href="page_b.html#food">Food</a>
      <a href="page_b.html#exercise">Exercise</a>
      <a href="page_b.html#drinks">Drinks</a>
    </div>
  </div> 

  <a href="page_c.html">Page C</a>  
  <a href="page_d.html">Page D</a>
</div>

<!-- Highlight current page (works for <a> but not <button>)-->
<script>
  $(function(){
      $('a').each(function(){
          if ($(this).prop('href') == window.location.href) {
              $(this).addClass('active'); 
              $(this).parents('li').addClass('active');
          }
      });
  });


</script>

---

您需要将活动类添加到每个页面中，以便在用户位于主页上时保持活动状态。你的代码应该是这样的

 <a class='active' href="index.html">Home</a>

A页

  <a class='active' href="page_a.html">Page A</a>

提示：请使用

href=“index.html”

而不是

href=“/”

，使用

href=“page\u a.html”

而不是

href=“/page\u a.html”

。我希望这个解决方案是动态的，因为我已经将导航栏提取到一个单独的HTML文件中（以避免将它单独粘贴到每个页面的HTML文件中）因此，无法将class='active'添加到导航中。您需要将get变量添加到包含的页面banner.html？thispage='home'中，然后以这种方式将活动类添加到正确的链接中。

  <a class='active' href="page_a.html">Page A</a>