如何更改按钮的样式，点击不同的按钮，应该更改为默认
如何更改按钮的样式，点击不同的按钮，应该更改为默认
提问于 2016-04-28 05:36:29
我有几个按钮，我想改变按钮的样式在点击事件，但点击后的另一个按钮，该按钮的样式应该更改为默认.我从DB抓取按钮就像
<table class="table">
<thead>
<tr>
<th style="text-align: center;">Tables</th>
</tr>
</thead>
<tbody>
@foreach($tables as $table)
<tr id="table">
<td style="text-align: center;">
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
@endforeach
</tbody>
</table>我的剧本是：
$('#table button').click(function(){
$(this).css('background-color','green');
});问题是，如果我点击不同的按钮背景颜色的按钮应该更改为默认，我如何才能得到这个？请帮帮忙，比你。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-04-28 05:44:28
ID必须是唯一的，所以我从行中删除了ID。
我还将内联CSS移到样式表中。
您的循环内容现在应该如下所示
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>示例代码
$(function() {
$('#table button').on("click",function(e){
e.preventDefault();
$('#table button').removeClass("selected");
$(this).addClass("selected");
});
}); #table th,td { text-align: center; }
.selected { background-color:green }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" class="table">
<thead>
<tr>
<th>Tables</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
</tbody>
</table>
Stack Overflow用户
发布于 2016-04-28 05:39:57
使用add class & remove类。
addclass.asp
removeclass.asp
Stack Overflow用户
发布于 2016-04-28 05:42:19
只有通过CSS才能做到这一点，将以下内容添加到您的样式中：
button {
background: grey;
}
button:active {
background: green;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36906079
复制相关文章
相似问题
腾讯云开发者
