jQuery按钮变色魔法

创作时间:

作者:

@小白创作中心

jQuery按钮变色魔法

在前端开发的世界里，jQuery就像一根魔法棒，让开发者能够轻松实现各种交互效果。今天，我们就来用jQuery施展一个简单的魔法——让按钮在点击时变色！

什么是jQuery？

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。用jQuery写代码，就像是有了一个强大的魔法助手，能让你的工作效率大幅提升。

准备工作：召唤jQuery

在使用jQuery之前，我们需要先将它引入到项目中。最简单的方式是通过CDN（内容分发网络）来引入。在你的HTML文件的<head>标签中添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

这行代码就像是念出了一段咒语，让jQuery这个强大的魔法助手出现在你的项目中。

施展魔法：按钮变色

HTML结构

首先，我们需要一些按钮作为施法目标。在你的HTML文件中添加以下代码：

<button class="color-btn">按钮1</button>
<button class="color-btn">按钮2</button>
<button class="color-btn">按钮3</button>

CSS样式

为了让魔法效果更明显，我们需要定义按钮的默认样式和激活状态的样式。在<style>标签中添加以下CSS代码：

.color-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  background-color: #ccc;
  color: #333;
  transition: 0.3s;
}

.color-btn.active {
  background-color: #007bff;
  color: white;
}

这里我们定义了按钮的默认样式（灰色背景）和激活状态的样式（蓝色背景）。

jQuery代码

现在，让我们用jQuery来实现点击按钮变色的魔法。在<script>标签中添加以下代码：

$(document).ready(function() {
  $('.color-btn').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

这段代码的含义是：

当文档加载完成后，执行函数
选择所有类名为color-btn的元素，为它们添加点击事件
当按钮被点击时，为当前按钮添加active类，并移除其他兄弟按钮的active类

完整示例

将以上HTML、CSS和jQuery代码整合到一个HTML文件中，你就可以看到魔法效果了！以下是完整的代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery按钮变色魔法</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .color-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      background-color: #ccc;
      color: #333;
      transition: 0.3s;
    }
    .color-btn.active {
      background-color: #007bff;
      color: white;
    }
  </style>
</head>
<body>
  <button class="color-btn">按钮1</button>
  <button class="color-btn">按钮2</button>
  <button class="color-btn">按钮3</button>

  <script>
    $(document).ready(function() {
      $('.color-btn').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
      });
    });
  </script>
</body>
</html>

你可以将这段代码复制到本地HTML文件中，或者使用在线代码编辑器如CodePen来运行和测试。