HTML/jQuery - 如何動態突出顯示當前頁面或部分？

Question

我想要什么？ jQuery 從導航欄中動態突出顯示當前頁面。

我是 jQuery/HTML 新手嗎？ 是的 - 如果這是一個愚蠢的問題，請道歉

我是否花了數小時搜索現有的 StackOverflow 帖子無濟於事？ 是的，這些是最有希望的，但由於我不明白的原因，他們的建議不起作用

有什么問題？ 使用下面的代碼，我試圖使導航欄中的當前頁面（/選定部分）保持綠色突出顯示（向最終用戶顯示他們當前所在的頁面）。

懸停功能正在工作，但一旦我點擊它，我似乎無法讓它保持那種顏色。

僅供參考 - 我在“導航菜單”中使用了#links 和 links.html，因為我希望該解決方案適用於這兩種情況（盡管實際上我將有兩個單獨的菜單：一個帶有指向.html 頁面的鏈接和一個帶有指向頁面#sections 的鏈接。

我做了一個可重復的小例子嗎？ 見下文

索引.html ：

<!DOCTYPE html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link rel="stylesheet" href="test_main.css">
    
</head>

<body>

    <div class="navigation">
        <a href="test.html">Home</a>
        <a href="#section_a">Section A</a>
        <a href="#section_b">Section B</a>  
      </div>

      <script>
          $(function(){
              $('a').each(function(){
                  if ($(this).prop('href') == window.location.href) {
                      $(this).addClass('active'); $(this).parents('li').addClass('active');
                  }
              });
          });
      </script>
            
    <p>Example text</p>

</body>

main.css ：


/* Add a white background color to the top navigation */
.navigation {
  background-color: #555555;
  color: #ffffff;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.navigation a {
  float: left;
  background-color: #555555;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.navigation a:hover {
  background-color: #000000;
  color: #ffffff;
}

.active {
  background-color: #00ff00;
  color: #00000
}

我知道這可以通過在導航 class 中設置 class="active" 來靜態完成，但這太麻煩且不可維護。

Answer 1

您的代碼有效，但出於priority ，它無法應用樣式來替換.navigation a ，請嘗試添加!important

.active {
  background-color: #00ff00 !important;
  color: #000000 !important;
}

要使用 URI 片段/哈希在菜單上激活，您可能需要應用click事件

Answer 2

TL;DR - 將navigation a:not(.active)添加到 main.css。

基於頁面突出顯示頂部導航菜單的完整答案：

索引.html ：

<!DOCTYPE html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link rel="stylesheet" href="test_main.css">
    
</head>

<body>

    <div class="navigation">
        <a href="test.html">Home</a>
        <a href="#section_a">Section A</a>
        <a href="#section_b">Section B</a>  
      </div>

      <script>
          $(function(){
              $('a').each(function(){
                  if ($(this).prop('href') == window.location.href) {
                      $(this).addClass('active'); $(this).parents('li').addClass('active');
                  }
              });
          });
      </script>
            
    <p>Example text</p>

</body>

main.css ：


/* Add a white background color to the top navigation */
.navigation {
  background-color: #555555;
  color: #ffffff;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.navigation a:not(.active) {
  float: left;
  background-color: #555555;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.navigation a:hover {
  background-color: #000000;
  color: #ffffff;
}

.active {
  color: #00000;
  float: left;
  background-color: #00ff00;
  color: #00000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

HTML/jQuery - 如何動態突出顯示當前頁面或部分？

問題描述

2 個解決方案

解決方案1
0 2021-01-31 21:19:40

解決方案2
0 已采納 2021-02-06 15:15:26

HTML/jQuery - 如何動態突出顯示當前頁面或部分？

問題描述

2 個解決方案

解決方案1 0 2021-01-31 21:19:40

解決方案2 0 已采納 2021-02-06 15:15:26

解決方案1
0 2021-01-31 21:19:40

解決方案2
0 已采納 2021-02-06 15:15:26