如何切换标题的颜色,只在当前选定的列标题上将其设置为红色?它当前只在单击另一个标题时保持打开状态并且不会消失。
$(".numeric").click(function() {
$(this).toggleClass("numeric-active");
});
.numeric-active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="container cf">
<thead class="cf">
<tr>
<th class="numeric">amount <i class="glyphicon glyphicon-triangle-bottom"></i></th>
<th class="numeric">case <i class="glyphicon glyphicon-triangle-bottom"></i></th>
<th class="numeric">field 3 <i class="glyphicon glyphicon-triangle-bottom"></i></th>
<th class="numeric">field 4 <i class="glyphicon glyphicon-triangle-bottom"></i></th>
<th class="numeric">location <i class="glyphicon glyphicon-triangle-bottom"></i></th>
<th class="numeric">date <i class="glyphicon glyphicon-triangle-bottom"></i></th>
</tr>
</thead>
<tbody class="verdicts">
<tr>
<td data-title="amount" class="amount">8,570,000.00<span class="result"></span></td>
<td data-title="case">title</td>
<td data-title="practice area">area</td>
<td data-title="user">Bob jones</td>
<td data-title="location">Orlando, FL</td>
<td data-title="date">Mar 6, 2017</td>
</tr>
<tr>
<td data-title="amount" class="amount">$447,115<span class="result"></span></td>
<td data-title="case">Another title</td>
<td data-title="practice area">area</td>
<td data-title="user">Joe Smith</td>
<td data-title="location">Orlando, FL</td>
<td data-title="date">Mar 6, 2017</td>
</tr>
</tbody>
</table>
答案 0 :(得分:0)
你可以通过从click事件中的每个其他元素中删除该类来实现这一点,这里是一个关于jsFiddle的快速示例。
$(".numeric").click(function() {
$(".numeric").removeClass('numeric-active');
$(this).toggleClass("numeric-active");
});