jQuery 是一款非常受歡迎的 JavaScript 函式庫，可以簡化開發者的 JavaScript 編程，提升開發效率。在 Web 開發中，為了提供更好的使用者體驗，我們經常需要對頁面元素進行樣式變更。本文將介紹 jQuery 如何實作選取項目變顏色的功能。
一、HTML 結構
首先，我們需要在 HTML 中加入一些清單元素，用來示範選取項目變顏色的效果。以下是一個簡單的 HTML 結構：
<!DOCTYPE html>
<html>
<head>
<title>选中项变颜色</title>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.selected {
background-color: #f5f5dc;
}
</style>
</head>
<body>
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</body>
</html>這裡定義了一個 ul 元素，其中包含四個 li 元素。當使用者點擊其中的一個 li 元素時，我們將該元素設定為選取狀態，並改變它的背景顏色。
二、jQuery 實作選取項目變色
接下來，我們需要使用 jQuery 在使用者點擊清單項目時實現變色效果。以下是具體步驟：
li 元素，並給它們綁定 click 事件。 $(document).ready(function(){
$("#list li").click(function(){
// TODO: 点击事件处理逻辑
});
});li 元素，我們需要新增一個CSS 類別selected，並移除其他所有清單項目的selected 類別。 $("#list li").click(function(){
// 添加选中状态
$(this).addClass('selected');
// 移除其他元素的选中状态
$(this).siblings().removeClass('selected');
});.selected {
background-color: #f5f5dc;
}完整的jQuery 程式碼如下：
$(document).ready(function(){
$("#list li").click(function(){
// 添加选中状态
$(this).addClass('selected');
// 移除其他元素的选中状态
$(this).siblings().removeClass('selected');
});
});三、效果預覽
最終實現的效果如下圖所示：
#四、總結
本文介紹如何使用jQuery 實作選中項變顏色的功能。透過本文的學習，你已經了解如何透過 jQuery 存取 DOM 元素、新增和刪除 CSS 類，並即時更新頁面。希望這篇文章能幫助你學習 jQuery，提升 Web 開發效率。
以上是jquery實作選取項變顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！
