jquery列表急换css

在当今的Web开发中，jQuery已经成为了前端开发的主流工具，它提供了一种简洁、高效的方式来操作HTML文档，包括元素的选择、修改、添加和删除等操作，本文将介绍如何使用jQuery来实现列表的切换CSS样式。

我们需要创建一个HTML列表。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

我们可以使用jQuery来为这个列表添加点击事件，当用户点击一个列表项时，我们将切换该列表项的CSS样式，我们可以将列表项的背景颜色从白色改为黑色，反之亦然。

$(document).ready(function() {
  $('#myList li').click(function() {
    $(this).toggleClass('active');
  });
});

在上面的代码中，$(document).ready(function() {...}); 确保了我们的JavaScript代码在DOM加载完成后才会执行。$('#myList li').click(function() {...}); 为ID为myList的元素的所有子元素（即列表项）添加了一个点击事件，当用户点击一个列表项时，$(this).toggleClass('active'); 将被执行。toggleClass方法会检查元素是否已经包含了指定的类名，如果包含，它将删除该类名；如果不包含，它将添加该类名。

我们需要定义CSS样式，我们可以定义一个名为active的类，将背景颜色设置为黑色：

#myList li.active {
  background-color: black;
  color: white;
}

在上面的CSS代码中，#myList li.active {...} 选择了ID为myList的元素的所有子元素（即列表项），并且这些子元素包含了active类名。background-color: black; 将背景颜色设置为黑色，color: white; 将文本颜色设置为白色。

通过以上步骤，我们就可以使用jQuery来实现列表的切换CSS样式了，这只是jQuery的一个简单应用，实际上，jQuery还有很多其他的功能，可以帮助我们更高效地开发Web应用。