Attributes not showing when element is clicked

Question

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>

You have not imported the jQuery library in your codepen example. — Al.G., Jun 10 '22 at 15:07
...but this is not the root cause, since if I add jQuery to the example it still does not work. The jQuery code is running (I see the result of console.log in the console), so @David IMO it's not a duplicate. — Al.G., Jun 10 '22 at 15:13

score 2 · Accepted Answer · answered Jun 10 '22 at 15:13

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>

score 0 · Answer 2 · answered Jun 10 '22 at 15:22

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

This works even when you apply the list-of-pages class to multiple divs in your page

Attributes not showing when element is clicked

2 Answers2