正文

如何用jQuery让UL列表中的LI项点击后变色，轻松实现动态交互效果

/0 浏览量
0505

在网页设计中，动态交互效果可以让用户界面更加生动有趣。使用jQuery来改变列表项（LI）的颜色是一种简单而常见的方法。以下是一个详细的指南，展示了如何实现这一效果。

准备工作

在开始之前，确保你已经：

  • 在HTML文档中包含了jQuery库。
  • 有一个包含LI项的UL列表。

1. HTML结构

首先，我们创建一个简单的UL列表：

<ul id="myList">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    <li>项目4</li>
</ul>

2. CSS样式

我们可以为列表项添加一些基本的样式：

#myList li {
    color: #333; /* 默认颜色 */
    cursor: pointer; /* 指针样式 */
    padding: 8px;
    margin-bottom: 5px;
}

3. jQuery代码

现在，我们将使用jQuery来编写一个函数，当点击列表项时，它会改变该项的颜色。

$(document).ready(function() {
    $('#myList li').click(function() {
        // 获取当前点击的LI项
        var $this = $(this);

        // 如果该项已经变色，则移除颜色
        if ($this.hasClass('active')) {
            $this.removeClass('active');
        } else {
            // 否则，移除其他LI项的颜色，并给当前点击的LI项添加颜色
            $('#myList li').removeClass('active');
            $this.addClass('active');
        }
    });
});

代码解释

  • $(document).ready() 确保代码在DOM完全加载后执行。
  • $('#myList li').click() 绑定点击事件到所有的LI项上。
  • var $this = $(this); 保存当前点击的LI项的引用。
  • if ($this.hasClass('active')) 检查当前点击的LI项是否已经有active类。
  • $('#myList li').removeClass('active'); 如果有，移除所有LI项的active类。
  • $this.addClass('active'); 如果没有，给当前点击的LI项添加active类。

4. CSS添加颜色

在CSS中定义active类的样式，为变色的列表项添加颜色：

.active {
    color: #ff0000; /* 新颜色 */
    background-color: #eee; /* 背景色 */
}

5. 完整示例

将以下代码放在HTML文件的<head>部分或<body>部分的末尾：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery变色示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #myList li {
            color: #333;
            cursor: pointer;
            padding: 8px;
            margin-bottom: 5px;
        }
        .active {
            color: #ff0000;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <ul id="myList">
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
        <li>项目4</li>
    </ul>
    <script>
        $(document).ready(function() {
            $('#myList li').click(function() {
                var $this = $(this);
                if ($this.hasClass('active')) {
                    $this.removeClass('active');
                } else {
                    $('#myList li').removeClass('active');
                    $this.addClass('active');
                }
            });
        });
    </script>
</body>
</html>

当运行此代码时，点击列表中的任何项目都会触发颜色变化，实现了一个简单的动态交互效果。

-- 展开阅读全文 --