Javascript HTML - 如何更改 OnClick 事件上的按钮背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26861465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML - How to change button background color on OnClick event
提问by K Ahir
I have following PHP code where 4 buttons are displaying dynamically from database table. Different content is displaying on page based on clicked button.
我有以下 PHP 代码，其中 4 个按钮从数据库表中动态显示。根据单击的按钮在页面上显示不同的内容。
Now, I want to do so when I click 1st button then button bg color should be changed so visitor can know which button is pressed. When 2nd button is clicked then bg color of that button should be changed and previously clicked button (1st button in this example) should be restored with original color.
现在，当我单击第一个按钮时，我想这样做，然后按钮 bg 颜色应该更改，以便访问者可以知道按下了哪个按钮。单击第二个按钮时，应更改该按钮的 bg 颜色，并且应将先前单击的按钮（本例中的第一个按钮）恢复为原始颜色。
Please let me know easiest way to do this using either CSS or Javascript.
请让我知道使用 CSS 或 Javascript 执行此操作的最简单方法。
<form name="frm_list" action="toptipper.php" method="post" enctype="multipart/form-data">
<?php
while(!$rs_tab_list->eof())
{
?>
<button type="submit" name="btn_tab" value="<?php print($rs_tab_list->fields("tabpkid")); ?>"><?php print($rs_tab_list->fields("title")); ?></button>
<?php
$rs_tab_list->movenext();
}
?>
</form>
回答by Billy
Uncomment out the comment marks if you want only one selected at a time.
如果您只想一次选择一个，请取消注释注释标记。
$('button').on("click",function(){
//$('button').not(this).removeClass();
$(this).toggleClass('active');
});.active{background-color:red;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>
<button>3</button>回答by Lead Developer
Write JS Onclickevent like this onclick="this.style.backgroundColor = 'red';"
Onclick像这样编写 JS事件onclick="this.style.backgroundColor = 'red';"
<?php
while(!$rs_tab_list->eof())
{
?>
<button type="submit" name="btn_tab" onclick="this.style.backgroundColor = 'red';" value="<?php print($rs_tab_list->fields("tabpkid")); ?>"><?php print($rs_tab_list->fields("title")); ?></button>
<?php
$rs_tab_list->movenext();
}
?>
回答by Roco CTZ
I don't know if changing the button color like this is the best design decision, but just in case it's purely for learning purposes:
我不知道像这样改变按钮颜色是否是最好的设计决定，但以防万一它纯粹是为了学习目的：
1) give the 2 buttons different IDs
1）给2个按钮不同的ID
2) use this javascript code
2）使用这个javascript代码
b1.onclick = function() {
b1.style.background = "green";
b2.style.background = ""; }
b2.onclick = function() {
b1.style.background = "";
b2.style.background = "green"; }
Live example:
现场示例：
回答by Ogbonna Vitalis
$('button').on("click",function(){
//$('button').not(this).removeClass();
$(this).toggleClass('active');
});.active{background-color:red;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>
<button>3</button>回答by priya786
in the button you can call a jquery function like
在按钮中，您可以调用 jquery 函数，例如
<input type="button" onClick=colorchange();>
/* in the jquery function you can do.*/
/* 在 jquery 函数中你可以做到。*/
function colorchange(){
$(this).css('background-color','#000000');
}
回答by KiV
It is pretty direct with jquery. I advice to add class using jquery and style the button later. Below fiddle helps you.
使用 jquery 非常直接。我建议使用 jquery 添加类并稍后设置按钮样式。下面的小提琴可以帮助你。
http://jsfiddle.net/kiranvarthi/oudkau4j/
http://jsfiddle.net/kiranvarthi/oudkau4j/
$("button").click(function(){
$(this).addClass("active");
});
回答by Ignas Damunskis
You can use js. Create class .activeand define it in your css:
你可以使用js。创建类.active并在您的 css 中定义它：
.active {
background-color: #yourcolor;
}
Now using js jquery you can make onclick event and add class on clicked button:
现在使用 js jquery 你可以制作 onclick 事件并在点击的按钮上添加类：
$('#yourbtnid').click(function() {
$(this).addClass('active');
}
!Don't forget to import jquery library before your js file or code in html file
！不要忘记在 js 文件或 html 文件中的代码之前导入 jquery 库
回答by Sergey Scopin
add id to button and then something like:
将 id 添加到按钮，然后是：
$('#buttonID').css('background-color','coloryouwant');
回答by Ray
In case you want to restore the intial value of the previous button, an easy way to do this is with jQuery. You can use the addClass() routine for this. For example:
如果您想恢复上一个按钮的初始值，一个简单的方法是使用 jQuery。您可以为此使用 addClass() 例程。例如：
//Restore all values
$("input").removeClass();
$("input").addClass("default");
//Set class that has the highlight color
$("#button2").addClass("highlight");
With this HTML:
使用此 HTML：
<input type="button" id="button1"/>
<input type="button" id="button2"/>
And this CSS:
这个CSS：
.default { background-color: blue;}
.highlight { background-color: yellow;}
Just add the onClick to the element to call the right functions.
只需将 onClick 添加到元素即可调用正确的函数。
Hope it helps.
希望能帮助到你。
