正文

学会用jQuery轻松选中并高亮显示无序列表当前项

/0 浏览量
0520

在网页设计中，无序列表（<ul>）和列表项（<li>）是常用的元素，用于展示项目列表。有时候，我们希望用户能够直观地看到当前选中的列表项。通过使用jQuery，我们可以轻松实现这个功能。下面，我将详细讲解如何使用jQuery选中并高亮显示无序列表中的当前项。

准备工作

首先，确保你的网页已经引入了jQuery库。你可以在HTML文件中通过以下代码引入jQuery：

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

选择器

为了选中无序列表中的当前项，我们需要使用jQuery的选择器。这里，我们将使用:last-child选择器来选中无序列表的最后一个子元素（即当前项）。

高亮显示

选中当前项后，我们可以通过添加一个CSS类来高亮显示它。下面是一个简单的CSS类定义，用于高亮显示：

.highlight {
    background-color: yellow;
}

代码实现

接下来，我们将使用jQuery为无序列表的当前项添加高亮效果。以下是一个完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>高亮显示无序列表当前项</title>
<style>
    .highlight {
        background-color: yellow;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // 选中无序列表的最后一个子元素
    $('ul li:last-child').addClass('highlight');
});
</script>
</head>
<body>

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

</body>
</html>

在上面的代码中，当文档加载完成后，$(document).ready()函数会被调用。在这个函数内部，我们使用$('ul li:last-child').addClass('highlight');这行代码来选中无序列表的最后一个子元素，并给它添加highlight类，从而实现高亮显示。

总结

通过以上步骤，我们可以轻松地使用jQuery选中并高亮显示无序列表中的当前项。这种方法不仅简单易用，而且具有很好的可扩展性。你可以根据实际需求，调整CSS样式和jQuery代码，以达到最佳效果。

-- 展开阅读全文 --