jquery實作選取項變顏色

WBOY原創: 2023-05-12 11:55:061121瀏覽

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 在使用者點擊清單項目時實現變色效果。以下是具體步驟：

透過 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 實作選中項變顏色的功能。透過本文的學習，你已經了解如何透過 jQuery 存取 DOM 元素、新增和刪除 CSS 類，並即時更新頁面。希望這篇文章能幫助你學習 jQuery，提升 Web 開發效率。

以上是jquery實作選取項變顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery css html 事件 dom 选择器 ul li

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript哪本書比較好點下一篇：JavaScript哪本書比較好點

看更多