Question

问题

我的网站有问题，我想将所选链接的颜色更改为蓝色，如果选择了其他，则将其重新设置为灰色，但不知道如何定位点击的链接< / strong>。这是我的代码。

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

几件事：

添加事件侦听器时，您调用了DivSelector，这意味着您将DivSelector（）的返回值添加为侦听器，这是无效的。相反，只需传递要添加为侦听器的函数的名称即可。
在从所有其他元素中删除“ active”类之后，需要将其添加到clicked元素中。您可以使用传递给事件侦听器的event参数来获得clicked元素。元素将为event.target。
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');
      }
    })
  }

更改活动链接的颜色

问题

4 个答案: