jQuery - 添加活动类并在单击时从其他元素中删除活动类

Java

在使用jQuery时，经常会遇到需要在元素上添加或删除活动类的情况。活动类通常用于标识元素的状态或应用特定的样式。本文将介绍如何使用jQuery来添加活动类，并且在单击其他元素时从其他元素中删除活动类。

首先，让我们来看一个简单的示例。假设我们有一个网页上有多个按钮，当点击某个按钮时，我们希望该按钮添加一个活动类，并且其他按钮上的活动类被删除。

为了实现这个功能，我们可以使用jQuery的addClass()和removeClass()方法。addClass()方法用于在元素上添加一个或多个类，而removeClass()方法用于从元素上移除一个或多个类。

现在，让我们来编写一段jQuery代码来实现这个功能：

Javascript
$(document).ready(function(){
  $('.button').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
  });
});

在上面的代码中，我们首先使用$(document).ready()来确保页面上的所有元素都已加载完毕。然后，我们使用.button选择器来选取所有的按钮元素，并使用.click()方法来为按钮添加点击事件处理程序。

在点击事件处理程序中，我们使用$(this)来选取当前被点击的按钮，并使用.addClass('active')将active类添加到该按钮上。然后，使用.siblings()方法选取该按钮的兄弟元素（即其他按钮），并使用.removeClass('active')将active类从这些按钮上移除。

这样，当我们点击某个按钮时，该按钮会添加active类，并且其他按钮上的active类会被移除。

案例代码：

html
<!DOCTYPE html>
<html>
<head>
  <title>添加活动类并在单击时从其他元素中删除活动类</title>
  <style>
    .button {
      padding: 10px 20px;
      background-color: #ccc;
      border-radius: 5px;
      cursor: pointer;
      margin-right: 10px;
    }
    
    .active {
      background-color: #ff0000;
      color: #fff;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
  <script>
    $(document).ready(function(){
      $('.button').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
      });
    });
  </script>
</head>
<body>
  <button class="button">按钮1</button>
  <button class="button">按钮2</button>
  <button class="button">按钮3</button>
  <button class="button">按钮4</button>
</body>
</html>

在上面的案例代码中，我们创建了一个简单的网页，其中包含四个按钮。当点击某个按钮时，该按钮会添加active类，并且其他按钮上的active类会被移除。通过为active类设置不同的样式，我们可以看到点击的按钮会突出显示。

这样，我们就成功地使用jQuery来添加活动类，并且在单击其他元素时从其他元素中删除活动类。这种技术在开发中非常有用，可以帮助我们实现各种交互效果和动态样式的改变。