更改活動鏈接顏色

Question

問題

我的網站有問題，我想將所選鏈接的顏色更改為藍色，如果選擇了其他鏈接，則將其恢復為灰色，但不知道如何在 javascript 中定位點擊的鏈接。 這是我的代碼。

 var center = document.getElementsByClassName("center"); for (let i = 0; i < center.length; i++) { center[i].addEventListener("click", DivSelector()); } function DivSelector() { for (let i = 0; i < center.length; i++) { center[i].classList.Remove('active'); }; }

 .nav-item { text-decoration: none; color: #505b67; margin-left: 10px; } .active { color: #4460f1; }

 <ul class="nav-tab-ul"> <li id="Profile"> <a class="center nav-item" href="">Profile</a> </li> <li id="Change-Password"> <a class="center nav-item" href="">Change password</a> </li> <li id="Notifications"> <a class="center nav-item" href="">Notifications</a> </li> <li id="My-Cards"> <a class="center nav-item" href="">My Cards</a> </li> </ul>

不知道如何在此處選擇單擊的鏈接以添加“活動”類。

Answer 1

您需要做的就是將活動類添加到您所在頁面的實際鏈接中。 因此，當您在個人資料頁面上時，您將活動添加到個人資料鏈接中，而其他人都沒有

個人資料頁

<ul class="nav-tab-ul">
            <li id="Profile">
              <a class="center nav-item active" href="">Profile</a>
            </li>
            <li id="Change-Password">
              <a class="center nav-item" href="">Change password</a>
            </li>
            <li id="Notifications">
              <a class="center nav-item" href="">Notifications</a>
            </li>
            <li id="My-Cards">
              <a class="center nav-item" href="">My Cards</a>
            </li>
  </ul>

更改密碼頁面

當您在更改密碼頁面上時，您將活動類添加到該鏈接，而其他任何類都沒有。

<ul class="nav-tab-ul">
                <li id="Profile">
                  <a class="center nav-item" href="">Profile</a>
                </li>
                <li id="Change-Password">
                  <a class="center nav-item active" href="">Change password</a>
                </li>
                <li id="Notifications">
                  <a class="center nav-item" href="">Notifications</a>
                </li>
                <li id="My-Cards">
                  <a class="center nav-item" href="">My Cards</a>
                </li>
</ul>

如果這些是單獨的頁面，就不需要 JS 嗎？

如果您使用一個頭文件並將該文件包含在所有頁面中，那么這將是一種不同的解決方案。 讓我們知道您為什么要使用 JS

Answer 2

一些東西：

1. 添加事件偵聽器時，調用了 DivSelector，這意味着將 DivSelector() 的返回值添加為偵聽器，該值是無效的。 而只是傳遞您要添加為偵聽器的函數的名稱。

2. 從所有其他元素中刪除后，您需要將“活動”類添加到單擊的元素中。 您可以使用傳遞給事件偵聽器的event參數來獲取單擊的元素。 該元素將是event.target 。

3. DivSelector 應在使用之前定義，因此應將其移至其余代碼的上方。

下面是一個例子：

 function DivSelector(event) { for (let i = 0; i < center.length; i++) { center[i].classList.remove('active'); } event.target.classList.add('active'); } let center = document.querySelectorAll("center"); for (let i = 0; i < center.length; i++) { center[i].addEventListener("click", DivSelector); }

 .nav-item { text-decoration: none; color: #505b67; margin-left: 10px; } .active { color: #4460f1; }

 <ul class="nav-tab-ul"> <li id="Profile"> <a class="center nav-item" href="#">Profile</a> </li> <li id="Change-Password"> <a class="center nav-item" href="#">Change password</a> </li> <li id="Notifications"> <a class="center nav-item" href="#">Notifications</a> </li> <li id="My-Cards"> <a class="center nav-item" href="#">My Cards</a> </li> </ul>

Answer 3

您可以在event.currentTarget單擊元素。

 const nodes = document.getElementsByClassName("center"); for (let i = 0; i < nodes.length; i++) { nodes[i].addEventListener("click", divSelector); } function divSelector(event) { removeAllActives(); event.currentTarget.className += ' active'; } function removeAllActives() { const actives = document.getElementsByClassName("active"); for (let i = 0; i < actives.length; i++) { actives[i].classList.remove('active'); } }

 .active { color: blue; }

 <a class="center"> Link 1 </a> <br/> <a class="center"> Link 2 </a>

Answer 4

嘗試這個。 它的工作

  var center = document.getElementsByClassName("center");
  for (let i = 0; i < center.length; i++) {
    center[i].addEventListener("click", function(e){
      for (let i = 0; i < center.length; i++) {
         center[i].classList.remove('active');
         e.target.classList.add('active');
      }
    })
  }