CODEWITHSUNDEEP
jquery
springoftwentyone
springoftwentyone

Reputation: 71

Attributes not showing when element is clicked

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>

Upvotes: 0

Views: 31

Answers (2)

emanuele-f
emanuele-f

Reputation: 394

$(".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

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 2

Related Questions