집 >웹 프론트엔드 >프런트엔드 Q&A >jquery는 선택한 항목의 색상 변경을 구현합니다.

jquery는 선택한 항목의 색상 변경을 구현합니다.

WBOY원래의: 2023-05-12 11:55:061128검색

jQuery는 개발자의 JavaScript 프로그래밍을 단순화하고 개발 효율성을 향상시킬 수 있는 매우 인기 있는 JavaScript 라이브러리입니다. 웹 개발에서는 더 나은 사용자 경험을 제공하기 위해 페이지 요소의 스타일을 변경해야 하는 경우가 많습니다. 이 기사에서는 jQuery가 선택한 항목의 색상을 변경하는 기능을 구현하는 방법을 소개합니다.

1. 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>

여기에는 4개의 li 요소를 포함하는 ul 요소가 정의되어 있습니다. 사용자가 li 요소 중 하나를 클릭하면 해당 요소를 선택된 상태로 설정하고 배경색을 변경합니다. ul 元素，其中包含四个 li 元素。当用户点击其中的一个 li 元素时，我们将该元素设置为选中状态，并改变它的背景颜色。

二、jQuery 实现选中项变颜色

接下来，我们需要使用 jQuery 在用户点击列表项时实现变色效果。以下是具体步骤：

通过 jQuery 选择器获取所有的 li 元素，并给它们绑定 click 事件。

$(document).ready(function(){
    $("#list li").click(function(){
        // TODO: 点击事件处理逻辑
    });
});

对于每个被点击的 li 元素，我们需要添加一个 CSS 类 selected，并移除其他所有列表项的 selected

li

click

$("#list li").click(function(){
    // 添加选中状态
    $(this).addClass('selected');
    // 移除其他元素的选中状态
    $(this).siblings().removeClass('selected');
});

li

selected

.selected {
    background-color: #f5f5dc;
}

jquery는 선택한 항목의 색상 변경을 구현합니다.

$(document).ready(function(){
    $("#list li").click(function(){
        // 添加选中状态
        $(this).addClass('selected');
        // 移除其他元素的选中状态
        $(this).siblings().removeClass('selected');
    });
});

rrreee

위 내용은 jquery는 선택한 항목의 색상 변경을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

성명：

이전 기사：어떤 JavaScript 책이 더 좋나요?다음 기사：어떤 JavaScript 책이 더 좋나요?