點擊切換表頭類別

Question

如何切換標題的顏色以僅在當前選定的列標題上將其設置爲紅色？它目前只能保持並且在另一個標題被點擊時不會熄滅。

$(".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>

Answer 1

您可以通過剛從單擊事件所有其他元素移除類實現這一點，這裏有一個簡單的例子與相關的jsfiddle。

$(".numeric").click(function() { 
    $(".numeric").removeClass('numeric-active'); 
    $(this).toggleClass("numeric-active"); 
}); 

https://jsfiddle.net/mrdag8bk/3/