两个或多个按钮点击后，点击按钮样式与其他按钮不同

heromps

于 2021-01-15 16:12:32 发布

阅读量912

点赞数

分类专栏： js 文章标签： js css javascript

本文链接：https://blog.csdn.net/heromps/article/details/112673846

版权

js 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何使用JavaScript和CSS实现按钮点击后与其他按钮的样式区分。通过添加点击事件监听器，当按钮被点击时，移除所有按钮的特殊样式，并为当前点击的按钮添加新的class，从而达到视觉上的区分。示例代码展示了如何为两个按钮添加点击响应和样式变化，使得用户能清楚地知道哪个按钮已被激活。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两个或多个按钮点击后，点击按钮样式与其他按钮不同

问题描述：点击一个按钮之后，点击的按钮与其他按钮不能区分开来，使得不知道显示的数据到底是点击那一个按钮显示出来的，于是就想着通过添加class以及点击事件来实现，当点击当前按钮时，可以通过设置添加的class类的样式来实现区别于其他按钮的不同。

具体实现：

添加两个按钮：

<div style="clear: both;">
    <button id="button1" class="tip">按钮1</button>
    <button id="button2" class="tip">按钮2</button>
</div>

在页面对应的js文件中添加按钮点击响应事件：

$('#button1').on('click',function () {
    layer.msg('点击了按钮1',{
        time:1000,
    });
})
$('#button2').on('click',function () {
    layer.msg('点击了按钮2',{
        time:1000,
    });
})

添加按钮点击后区别于其它按钮事件：

$('.tip').on('click',function () {
    // alert(this)
    $('.tip').removeClass("info1");
    // console.log(this)
    $(this).addClass("info1");
})

页面效果如下：

原页面：
在这里插入图片描述

点击一个后：
在这里插入图片描述
点击另一个：

具体样式根据要求调，这里只介绍方法。
想为按钮插入自己图片的，可以参考这篇博文(原理相通)插入自己图标