HTML - 如何更改OnClick事件上的按钮背景颜色

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>

9 个解决方案

#1

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>

#2

Write JS Onclick event like this onclick="this.style.backgroundColor = 'red';"

像这样编写JS Onclick事件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();
}       
?>

#3

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:

JS Fiddle - click the buttons and see how the colors change

JS Fiddle - 单击按钮,查看颜色如何变化

#4

$('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>

#5

add id to button and then something like:

将id添加到按钮,然后是:

$('#buttonID').css('background-color','coloryouwant');

#6

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.

希望能帮助到你。

#7

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/

$("button").click(function(){ 
    $(this).addClass("active");
});

#8

You can use js. Create class .active and 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库

#9

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');
}

#1