更改活动链接颜色

Question

Problem

I have an issue with my website, I want to change the color of the selected link to blue, and if other is selected put it back to gray, but don`t know how to target the clicked link in javascript. Here is my code.

 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>

Don`t know how to select the clicked link here for adding the 'active' class.

Answer 1

All you need to do is add the class active to the actual link of the page you are on. So when you on the profile page you add active to profile link and none of the others

PROFILE PAGE

<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>

CHANGE PASSWORD PAGE

When you on the change password page you add the active class to that link and none of the others.

<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>

If these are separate pages there is no need for JS?

If you are using one header file and including the file into all your pages then it will be a different solution. Let us know why you want to use JS

Answer 2

A few things:

1. When adding your event listener, you called DivSelector, meaning you added the return value of DivSelector() as a listener, which is void. Instead just pass the name of the function you want to add as a listener.

2. You need to add the 'active' class to the clicked element after removing it from all the others. You can get the clicked element by using the event argument passed to your event listener. The element will be event.target .

3. DivSelector should be defined before it's used, so it should be moved above the rest of the code.

Here's an example:

 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

You can get the element clicked in 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

Try this. its working

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