如何在点击时更改按钮的样式并单击其他按钮，它应更改为默认

Question

我有多个按钮，我想在点击事件上更改按钮的样式，但是在点击另一个按钮后，按钮样式应该更改为默认值... 我正在从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');
  });

问题是，如果我点击不同的按钮，那个按钮的背景颜色应该改为默认，我怎么能得到这个？ PLZ帮助，比你。

Answer 1

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>

Answer 2

使用add class＆amp;删除课程。

http://www.w3schools.com/jquery/html_addclass.asp

http://www.w3schools.com/jquery/html_removeclass.asp

Answer 3

您只能通过CSS执行此操作，并在下面添加您的风格：

button { 
   background: grey;
}
button:active { 
   background: green;
}