Toggle-Tabelle Header-Klasse bei Klick

Question

Wie kann ich die Farbe der Kopfzeile, um nur rot auf der aktuell ausgewählten Spaltenüberschrift setzen? Es bleibt nur an und geht nicht aus, wenn ein anderer Header angeklickt wird.

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

Sie können dies erreichen, indem nur die Klasse von jedem anderen Elemente auf dem Click-Ereignisse zu entfernen, ist hier ein kurzes Beispiel mit dem zugehörigen jsFiddle.

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

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