Question

我有以下PHP代码，其中4个按钮是从数据库表动态显示的。根据点击的按钮在页面上显示不同的内容。

现在，我想点击第一个按钮，然后按钮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

像这样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();
}       
?>

Answer 3

我不知道改变这样的按钮颜色是否是最好的设计决定，但以防它纯粹是出于学习目的：

1）给2个按钮不同的ID

2）使用此javascript代码

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 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>

Answer 5

将id添加到按钮，然后添加：

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

Answer 6

如果你想恢复上一个按钮的初始值，一个简单的方法是使用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 7

与jquery相当直接。我建议使用jquery添加类，然后设置按钮样式。以下小提琴可以帮助你。

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

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

Answer 8

你可以使用js。创建类.active并在css中定义它：

.active {
    background-color: #yourcolor;
}

现在使用js jquery，你可以制作onclick事件并在点击按钮上添加类：

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

！不要忘记在你的js文件或html文件中的代码之前导入jquery库

Answer 9

在按钮中你可以调用像

这样的jquery函数

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

你可以在jquery函数中使用

/ *。* /

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

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

9 个答案: