Question

我正在尝试制作一个按钮，一次点击它就会改变它的颜色，然后在另一次点击时它会返回原始形状。像点击和未点击的东西。

我添加了一个JSfiddle供你查看。 https://jsfiddle.net/dw5y5xLx/3/

$('.genM').click(function() {

$('.genM').removeClass('selected');


$(this).addClass('selected');

});

谢谢！

另外，有没有办法只使用CSS HTML？

感谢。

Answer 1

$('.genM').click(function() {
    $(this).toggleClass('selected');
});

我已经为您更新了js小提琴，请检查（https://jsfiddle.net/dw5y5xLx/15/）！

Answer 2

jQuery hasClass功能可以提供帮助

$('.genM').click(function() {

    if($(this).hasClass('selected')){
            $(this).removeClass('selected');
    }else{
        $(this).addClass('selected');
    }

});

Answer 3

<强> IDEA：

有没有办法只使用CSS HTML？

是的，有一种方法可以通过纯CSS和HTML实现这一目标。但是，如果你不想使用js，你必须有一个能够保持＆＃34;按下＆＃34;的HTML元素。或＆＃34;未压缩＆＃34;只有自己状态，没有js。

但是，没有这样的HTML元素，所以你必须使用类似的东西： Checkbox

<input type="checkbox">＆＃34;已检查＆＃34;和＆＃34;未经检查＆＃34;状态和实际上相同的＆＃34;按下＆＃34;或＆＃34;未按下＆＃34;。

<强> SOLUTION：

诀窍是使用CSS对ckeckbox进行样式化，使其在视觉上显示为按下或未按下的按钮。 Here is an example如何设置程式化复选框 - 您需要修改CSS才能使其像按钮一样显示，而不是切换开关！

您将需要使用这样的CSS选择器（如示例所示）：

input[type="checkbox"]:checked { ... },
input[type="checkbox"]:checked + .slider { ... },

单击然后取消单击jquery按钮不起作用

3 个答案: