Html 单击时更改按钮的背景色

我是新手，我有个问题。当我点击一个按钮时，我试图改变它的背景色和颜色。按钮在单击时不能执行任何操作，只能更改其颜色

例如，我想点击两个按钮。。。两者都必须将背景颜色从白色更改为蓝色。如果我想点击一个或多个按钮，也是一样的。我怎样才能达到这个效果？我在下面发布我的HTML和CSS：

<div class="multiple-choice gradient">
    <div class="container">
        <h2 class="multiple-choice-h">Please select the products, that you are interested in:</h2>
        <div class="choice">
            <div class="purvi-red">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                </div>
            </div>
            <div class="vtori-red">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                </div>
            </div>
            <div class="treti-red">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn">Interested in all</button>
                    </div>
                </div>
            </div>
            <div class="chetvurti-red">
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" class="btn-primary">Continue to Subscribe Page</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

---

我已经创建了一个例子。看看：

$（'.btn'）。单击（函数（）{
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
}否则{
$（此）.addClass（“活动”）；
}
});
。多项选择-h{
颜色：白色；
字号：100；
字体大小：3.1米；
字体系列：“机器人”；
线高：1.2；
利润率最高：5%；
字距：8px；
字母间距：1px；
}
.选择{
利润率最高：6%；
}
.btn{
宽度：100%；
边框样式：实心；
边框宽度：1px；
边框颜色：rgb（45157225）；
边界半径：3px；
背景色：#ffffff；
颜色：#0077c0；
盒影：0px 4px 0px 0px#0083aa；
文本对齐：左对齐；
左侧填充：20px；
填充顶部：24px；
填充底部：24px；
字体大小：1.7em；
字体大小：粗体；
}
维托里红{
利润率最高：1.5%；
}
特雷蒂红{
利润率最高：1.5%；
}
切特弗蒂红{
利润率最高：5%；
}
.btn主要{
宽度：100%；
-webkit外观：无；
-moz外观：无；
外观：无；
背景：url（../img/arrow right.png）#f49500无重复67%！重要；
颜色：黑色；
字号：1.8em；
字体大小：粗体；
字体系列：“机器人”；
颜色：白色；
填充顶部：20px；
垫底：20px；
边界：无；
盒影：0px 4px 0px 0px#0083aa；
文本对齐：居中；
边界半径：5px；
边缘底部：100px；
}
.主动{
背景色：红色；
}

请选择您感兴趣的产品：
文本
文本
文本
文本
对一切都感兴趣
继续订阅页面
我用创建了一个示例。看看：


$（'.btn'）。单击（函数（）{
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
}否则{
$（此）.addClass（“活动”）；
}
});
。多项选择-h{
颜色：白色；
字号：100；
字体大小：3.1米；
字体系列：“机器人”；
线高：1.2；
利润率最高：5%；
字距：8px；
字母间距：1px；
}
.选择{
利润率最高：6%；
}
.btn{
宽度：100%；
边框样式：实心；
边框宽度：1px；
边框颜色：rgb（45157225）；
边界半径：3px；
背景色：#ffffff；
颜色：#0077c0；
盒影：0px 4px 0px 0px#0083aa；
文本对齐：左对齐；
左侧填充：20px；
填充顶部：24px；
填充底部：24px；
字体大小：1.7em；
字体大小：粗体；
}
维托里红{
利润率最高：1.5%；
}
特雷蒂红{
利润率最高：1.5%；
}
切特弗蒂红{
利润率最高：5%；
}
.btn主要{
宽度：100%；
-webkit外观：无；
-moz外观：无；
外观：无；
背景：url（../img/arrow right.png）#f49500无重复67%！重要；
颜色：黑色；
字号：1.8em；
字体大小：粗体；
字体系列：“机器人”；
颜色：白色；
填充顶部：20px；
垫底：20px；
边界：无；
盒影：0px 4px 0px 0px#0083aa；
文本对齐：居中；
边界半径：5px；
边缘底部：100px；
}
.主动{
背景色：红色；
}

请选择您感兴趣的产品：
文本
文本
文本
文本
对一切都感兴趣
继续订阅页面
使用JS进行颜色更改。考虑这个按钮，

<button type="button" class="btn">text</button>

文本

包括脚本

<script>
$('.btn').click(function(){
 $(this).css('color','red');
});
</script>


$（'.btn'）。单击（函数（）{
$（this.css（'color'，'red'）；
});

这会将您单击的按钮的颜色更改为红色

PS：包括JQuery库，以便使用。
使用JS进行颜色更改。考虑这个按钮，

<button type="button" class="btn">text</button>

文本

包括脚本

<script>
$('.btn').click(function(){
 $(this).css('color','red');
});
</script>


$（'.btn'）。单击（函数（）{
$（this.css（'color'，'red'）；
});

这会将您单击的按钮的颜色更改为红色

PS：包括JQuery库以使其工作。
如果您想在不使用Javascript的情况下使用CSS，那么您可以使用复选框和类似的标签来实现这一点


输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签{
背景色：红色；
填充：10px 15px；
}
输入[类型=复选框]：选中+标签{
背景颜色：蓝色；
}
如果你想在不使用Javascript的情况下使用CSS，那么你可以通过一个复选框和这样的标签来实现


输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签{
背景色：红色；
填充：10px 15px；
}
输入[类型=复选框]：选中+标签{
背景颜色：蓝色；
}

否则，您应该查找javascriptSo，颜色应该切换或仅为单一状态？您可以使用锚定，而不是带有[visited]修饰符的按钮，因为您使用的是引导。否则，您应该查找javascriptSo，颜色应该切换，或者只是单一状态？您可以使用锚，而不是带有[visited]修饰符的按钮，因为您使用的是引导。非常感谢您的帮助。既然我是个新手，我想学一些新的技巧，我想我应该学