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

更改一个按钮背景颜色onClick并将先前单击的按钮恢复为默认背景(8个按钮)

要实现更改一个按钮背景颜色onClick并将先前单击的按钮恢复为默认背景的功能,可以使用以下步骤:

  1. HTML结构:创建一个包含8个按钮的HTML页面,每个按钮都有一个唯一的ID和一个默认的背景颜色。
代码语言:txt
复制
<button id="button1" style="background-color: #ffffff;">Button 1</button>
<button id="button2" style="background-color: #ffffff;">Button 2</button>
<button id="button3" style="background-color: #ffffff;">Button 3</button>
<button id="button4" style="background-color: #ffffff;">Button 4</button>
<button id="button5" style="background-color: #ffffff;">Button 5</button>
<button id="button6" style="background-color: #ffffff;">Button 6</button>
<button id="button7" style="background-color: #ffffff;">Button 7</button>
<button id="button8" style="background-color: #ffffff;">Button 8</button>
  1. JavaScript代码:使用JavaScript来实现按钮点击事件的处理逻辑。
代码语言:txt
复制
// 获取所有按钮元素
var buttons = document.querySelectorAll("button");

// 定义一个变量来保存先前单击的按钮
var previousButton = null;

// 遍历所有按钮,并为每个按钮添加点击事件处理程序
buttons.forEach(function(button) {
  button.addEventListener("click", function() {
    // 恢复先前单击的按钮的默认背景颜色
    if (previousButton !== null) {
      previousButton.style.backgroundColor = "#ffffff";
    }

    // 更改当前按钮的背景颜色
    this.style.backgroundColor = "#ff0000";

    // 更新先前单击的按钮为当前按钮
    previousButton = this;
  });
});

以上代码中,我们首先通过document.querySelectorAll("button")获取到所有的按钮元素,并使用forEach方法遍历每个按钮。然后,为每个按钮添加一个点击事件处理程序。在点击事件处理程序中,我们首先恢复先前单击的按钮的默认背景颜色,然后更改当前按钮的背景颜色为指定的颜色,并更新先前单击的按钮为当前按钮。

这样,当用户点击一个按钮时,该按钮的背景颜色会改变,并且先前单击的按钮的背景颜色会恢复为默认颜色。

这个功能可以应用于各种场景,例如在一个多选按钮组中,用户可以通过点击按钮来选择一个选项,同时清除先前选择的选项。另外,这个功能也可以用于实现类似于标签页切换的效果,用户点击不同的按钮来切换显示内容。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,满足不同规模和业务需求。产品介绍链接
  • 腾讯云云数据库MySQL版:高性能、可扩展的关系型数据库服务,适用于各种规模的应用程序。产品介绍链接
  • 腾讯云云原生容器服务TKE:基于Kubernetes的容器管理服务,提供高可用、弹性伸缩的容器集群。产品介绍链接
  • 腾讯云人工智能平台AI Lab:提供丰富的人工智能开发工具和服务,帮助开发者快速构建和部署AI应用。产品介绍链接
  • 腾讯云物联网平台IoT Hub:提供全面的物联网解决方案,包括设备管理、数据采集、消息通信等功能。产品介绍链接
  • 腾讯云移动推送TPNS:高效可靠的移动消息推送服务,支持Android、iOS等多个平台。产品介绍链接
  • 腾讯云对象存储COS:安全可靠的云端存储服务,适用于图片、音视频、文档等各种类型的数据。产品介绍链接
  • 腾讯云区块链服务:提供高性能、可扩展的区块链解决方案,支持多种场景的应用开发。产品介绍链接
  • 腾讯云虚拟专用网络VPC:构建安全可靠的云上网络环境,实现不同资源之间的隔离和互通。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券