Question

25

HTML - How to change button background color on OnClick event

rated 0 times [ 32] [ 7] / answers: 1 / hits: 28478 / 10 Years ago, tue, november 11, 2014, 12:00:00

I have following PHP code where 4 buttons are displaying dynamically from database table. Different content is displaying on page based on clicked button.

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.

Please let me know easiest way to do this using either CSS or 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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gonzaloulyssess

Add To Favorites

Follow

Total Points: 225

Total Questions: 114

Total Answers: 112

Location: Iraq

Member since Fri, Jun 5, 2020

4 Years ago

answered 10 Years ago dusty · Accepted Answer

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>