正文

如何使用jQuery实现ul li选中样式的切换

/0 浏览量
0423

在网页设计中，有时我们需要为用户交互提供反馈，例如点击某个列表项时改变其样式，以突出当前选中的项。jQuery 提供了简单且强大的方法来实现这样的功能。以下是如何使用 jQuery 实现列表项选中样式的切换。

1. 准备工作

首先，确保你的网页已经引入了 jQuery 库。如果没有，你可以通过以下链接下载并引入：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. HTML 结构

创建一个简单的无序列表：

<ul id="myList">
    <li class="item">列表项 1</li>
    <li class="item">列表项 2</li>
    <li class="item">列表项 3</li>
    <li class="item">列表项 4</li>
</ul>

3. CSS 样式

定义列表项的默认样式和选中时的样式：

.item {
    background-color: #f2f2f2;
    cursor: pointer;
    padding: 8px;
    margin-bottom: 5px;
}

.selected {
    background-color: #4CAF50;
    color: white;
}

4. jQuery 代码

接下来，编写 jQuery 代码来实现点击列表项时的样式切换：

$(document).ready(function() {
    $('#myList .item').click(function() {
        // 移除所有列表项的选中样式
        $('#myList .item').removeClass('selected');
        // 为当前点击的列表项添加选中样式
        $(this).addClass('selected');
    });
});

代码解析

  • $(document).ready(function() {...}): 确保在文档完全加载后再执行代码。
  • $('#myList .item').click(function() {...}): 为所有类名为 item 的元素绑定点击事件。
  • $('#myList .item').removeClass('selected'): 移除所有列表项的 selected 类，以清除之前可能存在的选中状态。
  • $(this).addClass('selected'): 为当前点击的列表项添加 selected 类，从而改变其样式。

5. 完整示例

将以上代码组合在一起，你将得到一个完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表项选中样式切换</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .item {
            background-color: #f2f2f2;
            cursor: pointer;
            padding: 8px;
            margin-bottom: 5px;
        }

        .selected {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>

<ul id="myList">
    <li class="item">列表项 1</li>
    <li class="item">列表项 2</li>
    <li class="item">列表项 3</li>
    <li class="item">列表项 4</li>
</ul>

<script>
    $(document).ready(function() {
        $('#myList .item').click(function() {
            $('#myList .item').removeClass('selected');
            $(this).addClass('selected');
        });
    });
</script>

</body>
</html>

当你点击列表中的任何一项时，该列表项的背景色将会变为绿色，文字颜色变为白色，从而突出显示当前选中的项。

-- 展开阅读全文 --