博客

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

问题描述：点击一个按钮之后，点击的按钮与其他按钮不能区分开来，使得不知道显示的数据到底是点击那一个按钮显示出来的，于是就想着通过添加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");
})

页面效果如下：

原页面：

点击一个后：



点击另一个：





具体样式根据要求调，这里只介绍方法。



想为按钮插入自己图片的，可以参考这篇博文(原理相通)

插入自己图标