單擊元素時不顯示屬性

單擊每個元素時，active-page（包含白色背景屬性）應該添加到它們的類中，但它沒有這樣做。

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>

uj5u.com熱心網友回復：

你想這樣做：

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

為什么你的代碼不起作用？

這是因為您正在使用event.target. 這將參考您單擊的元素。它可能是它.pages或它的任何孩子。

演示

顯示代碼片段

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

uj5u.com熱心網友回復：

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

即使您將list-of-pages類應用于頁面中的多個 div，這也有效

標籤：jQuery

上一篇：使用jQuery清除特定的輸入欄位

下一篇：將每個div插入下一個div(jQuery)