首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当有多个div时,用于添加/删除特定类的Jquery单击事件

当有多个div时,可以使用jQuery的点击事件来添加或删除特定类。下面是一个示例代码:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box">Div 1</div>
  <div class="box">Div 2</div>
  <div class="box">Div 3</div>

  <script>
    $(document).ready(function(){
      $(".box").click(function(){
        $(this).toggleClass("highlight");
      });
    });
  </script>
</body>
</html>

在上面的代码中,我们首先引入了jQuery库。然后定义了一个CSS样式.highlight,用于设置被点击的div的背景颜色为黄色。

接下来,使用$(document).ready()函数来确保文档加载完毕后执行代码。在这个函数内部,我们使用.click()方法为所有class为box的div元素添加点击事件。

当点击一个div时,$(this)表示当前被点击的div元素。使用.toggleClass()方法,它会在被点击的div上切换highlight类的存在。如果div已经有highlight类,则移除它;如果没有,则添加它。

这样,每次点击一个div时,它的背景颜色会在黄色和默认颜色之间切换。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券