更改活动链接颜色

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');
      }
    })
  }