如何使用 CSS 突出顯示 HTML 按鈕？

Question

我試圖在我的導航菜單（帶有下拉菜單）中突出顯示“當前頁面”。

當我有簡單的導航鏈接（使用“< a >”HTML 標簽構建）時，下面的代碼就完成了這項工作。 我現在正在升級我的導航欄以保存下拉菜單（使用“< button >”HTML 標簽）。

我相信我需要采取類似的方法並將活動 class 分配給“當前”頁面，但我無法解決如何以與“<a>”對象相同的方式循環“<按鈕>”對象

在導航欄中使用按鈕（“<按鈕>”）時，如何在導航欄中動態突出顯示當前頁面？

我在 W3 上找到了一篇相關文章： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_active_element2但它不適用於我的用例，因為我在不同的 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>

相關 CSS：

...
.active {
  background-color: blue;
}
...

.dropdown:not(.dropdown-content) {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;  
  border: none;
  outline: none;
  padding: 14px 16px;
  margin: 0;
}

...

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: #ffffff;
  background-color: #000000;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content{
  display: block;
  z-index: 1;
}

Answer 1

您需要將 class 活動添加到每個頁面，以便用戶在主頁上時。 你的代碼是這樣的。

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

對於頁面 A

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