jquery点击添加删除样式-编程学习网

jquery是一种高效且常用的JavaScript库，主要用于简化HTML文档的遍历和操作、事件处理、动画效果的实现，前端开发者经常使用它来开发交互性强的网页。在jQuery中添加和删除样式也是一项常见的任务，下面将介绍如何使用jQuery实现点击添加和删除样式。

首先，我们需要使用HTML和CSS创建一个简单的样式列表。在HTML中，我们可以使用ul和li标签创建一个简单的无序列表，代码如下：

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

接着，在CSS中，我们可以为列表项指定样式，以便在添加和删除样式时使用。代码如下：

.myList li{
  padding:10px;
  border:1px solid black;
  cursor:pointer;
}
.myList li.selected{
  background-color:gray;
  color:white;
}

现在，在JavaScript文件中，我们可以使用jQuery来实现添加和删除样式。首先，我们需要使用jQuery选择器找到所有列表项，并使用click()函数向它们添加单击事件，代码如下：

$(document).ready(function(){
  $('.myList li').click(function(){
    //代码将在此处添加
  });
});

在单击事件中，我们可以使用toggleClass()函数来添加或删除.selected类，即已经在CSS中定义了的样式。代码如下：

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

现在，当单击列表项时，它们将切换被选中状态的样式。如果已经被选中，则将其取消选择，反之亦然。可以在线采用此示例：https://codepen.io/alenaofficial/pen/zYGOYap

添加和删除样式就是这么简单，使用jQuery，我们可以轻松地实现动态样式变化，从而提升用户体验。

以上就是jquery点击添加删除样式的详细内容，更多请关注编程网其它相关文章！

文章详情