Attributes not showing when element is clicked

June 10, 2022

When each element is clicked, active-page (which contains the white background attribute) should be added to their class but it’s not doing that.

Codepen: https://codepen.io/sn-tin/pen/xxYQgBo?editors=1111

$(".list-of-pages .pages").click(function(event) {
  console.log(event.target);
  let targetLink = $(event.target);
  if (targetLink.hasClass("project-page")) {
    $(this).addClass("active-page");
    $(".about-me-page").removeClass("active-page");
    $(".contact-page").removeClass("active-page");
  }
  if (targetLink.hasClass("about-me-page")) {
    $(this).addClass("active-page");
    $(".project-page").removeClass("active-page");
    $(".contact-page").removeClass("active-page");
  }
  if (targetLink.hasClass("contact-page")) {
    $(this).addClass("active-page");
    $(".project-page").removeClass("active-page");
    $(".about-me-page").removeClass("active-page");
  }
});

body {
  background-color: pink;
}

.list-of-pages {
  width: 50%;
  margin: 30px auto 20px;
}

.list-of-pages a {
  display: block;
  color: black;
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
}

.list-of-pages a:hover {
  color: gray;
}

.list-of-pages span {
  margin-left: 20px;
}

.active-page {
  background-color: white;
  border-radius: 10px;
}

.active-page a {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-of-pages d-flex flex-row" id="portfolio-pages">
  <div class="pages project-page active-page">
    <a href="#">
      <i class="fa-solid fa-code fa-lg"></i>
      <span>Projects</span>
    </a>
  </div>
  <div class="pages about-me-page">
    <a href="#">
      <i class="fa-solid fa-user fa-lg"></i>
      <span>About Me</span>
    </a>
  </div>
  <div class="pages contact-page">
    <a href="#">
      <i class="fa-solid fa-phone fa-lg"></i>
      <span>Contact</span>
    </a>
  </div>
</div>

>Solution :

You want to do it like this:

$(".list-of-pages .pages").click(function(event) {
  console.log(event.target);
  $(".list-of-pages .pages").removeClass("active-page")
  $(this).addClass("active-page")
});

Why did your code not work?

It’s because you are using event.target. that will refer to the element you click on. It could be .pages or any of the children of that.

Demo

$(".list-of-pages .pages").click(function(event) {
  console.log(event.target);
  $(".list-of-pages .pages").removeClass("active-page")
  $(this).addClass("active-page")
});

body {
  background-color: pink;
}

.list-of-pages {
  width: 50%;
  margin: 30px auto 20px;
}

.list-of-pages a {
  display: block;
  color: black;
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
}

.list-of-pages a:hover {
  color: gray;
}

.list-of-pages span {
  margin-left: 20px;
}

.active-page {
  background-color: white;
  border-radius: 10px;
  a {
    color: black;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-of-pages d-flex flex-row" id="portfolio-pages">
  <div class="pages project-page active-page">
    <a href="#">
      <i class="fa-solid fa-code fa-lg"></i>
      <span>Projects</span>
    </a>
  </div>
  <div class="pages about-me-page">
    <a href="#">
      <i class="fa-solid fa-user fa-lg"></i>
      <span>About Me</span>
    </a>
  </div>
  <div class="pages contact-page">
    <a href="#">
      <i class="fa-solid fa-phone fa-lg"></i>
      <span>Contact</span>
    </a>
  </div>
</div>