Attributes not showing when element is clicked-CodePudding

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  id="portfolio-pages">
  <div >
    <a href="#">
      <i ></i>
      <span>Projects</span>
    </a>
  </div>
  <div >
    <a href="#">
      <i ></i>
      <span>About Me</span>
    </a>
  </div>
  <div >
    <a href="#">
      <i ></i>
      <span>Contact</span>
    </a>
  </div>
</div>

CodePudding user response：

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  id="portfolio-pages">
  <div >
    <a href="#">
      <i ></i>
      <span>Projects</span>
    </a>
  </div>
  <div >
    <a href="#">
      <i ></i>
      <span>About Me</span>
    </a>
  </div>
  <div >
    <a href="#">
      <i ></i>
      <span>Contact</span>
    </a>
  </div>
</div>

CodePudding user response：

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