HTML - Как изменить цвет фона кнопки на событии OnClick

Question

У меня есть код PHP, где 4 кнопки динамически отображаются из таблицы базы данных. Разный контент отображается на странице по нажатой кнопке.

Теперь, я хочу сделать это, когда я нажимаю 1-ю кнопку, тогда цвет кнопки bg должен быть изменен, чтобы посетитель мог узнать, какая кнопка нажата. Когда нажата вторая кнопка, цвет bg этой кнопки должен быть изменен, а кнопка с предыдущим нажатием (первая кнопка в этом примере) должна быть восстановлена ​​с исходным цветом.

Пожалуйста, дайте мне знать простейший способ сделать это, используя 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> 

Answer 1

Исключить отметки комментариев, если вы хотите только один выбранный за раз.

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

Answer 2

добавить идентификатор к кнопке, а затем что-то вроде:

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

Answer 3

В случае, если вы хотите восстановить intial значение предыдущей кнопки, простой способ сделать это с помощью JQuery. Для этого вы можете использовать процедуру addClass(). Например:

//Restore all values 
$("input").removeClass(); 
$("input").addClass("default"); 

//Set class that has the highlight color 
$("#button2").addClass("highlight"); 

С помощью этого HTML:

<input type="button" id="button1"/> 
<input type="button" id="button2"/> 

И этот CSS:

.default { background-color: blue;} 
.highlight { background-color: yellow;} 

Просто добавьте OnClick к элементу для вызова нужных функций.

Надеюсь, это поможет.

Answer 4

Написать 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(); 
}  
?> 

Answer 5

Это довольно прямой с JQuery. Я советую добавить класс с помощью jquery и стиль кнопки позже. Ниже скрипки помогает.

http://jsfiddle.net/kiranvarthi/oudkau4j/

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

Answer 6

Вы можете использовать JS. Создать класс .active и определить его в CSS:

.active { 
    background-color: #yourcolor; 
} 

Теперь с помощью JS JQuery вы можете сделать OnClick событие и добавить класс на щелкнули кнопку:

$('#yourbtnid').click(function() { 
    $(this).addClass('active'); 
} 

!Не забудьте импортировать библиотеку jquery перед вашим js-файлом или кодом в html-файле

Answer 7

Я не знаю, является ли изменение цвета кнопки таким, как это лучшее дизайнерское решение, но на всякий случай это чисто для учебных целей:

1) дают 2 кнопки различные идентификаторы

2) используют этот код яваскрипта

b1.onclick = function() { 
    b1.style.background = "green"; 
    b2.style.background = ""; } 

b2.onclick = function() { 
    b1.style.background = ""; 
    b2.style.background = "green"; } 

Живой пример:

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

Answer 8

на кнопку вы можете вызвать функцию JQuery как

<input type="button" onClick=colorchange();> 

/* в функции Jquery вы можете сделать. */

function colorchange(){ 
$(this).css('background-color','#000000'); 
} 

Answer 9

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