クラスの操作をjQueryで次のように実施しています。
・クラスの追加 → addClass
・クラスの削除 → removeClass
・クラスの確認 → hasClass
このサンプルで想定したのはテーブルをソートしたときのヘッダです。これと先日アップした次の記事を組み合わせることで簡単にテーブルヘッダが作成できると思います。
Goro's Jornal ボタンのサンプル：https://somegoro.blogspot.jp/2016/11/html-css-button-active-hover-background.html
ではサンプルをどうぞ。コピペ自由です。これで残業を減らして健康的に暮らしてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ToggleEvent_jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
$(function(){
$('.tab').on('click', function() {
if($(this).hasClass("active01")){
$(this).removeClass("active01");
$(this).addClass("active02");
}else if($(this).hasClass("active02")){
$(this).removeClass("active02");
$(this).addClass("active01");
}else{
$(this).addClass("active01");
}
/* 兄弟要素の属性を指定 */
$(this).siblings(".tab").removeClass("active01 active02");
});
});
</script>
<style>
.tab {
width:200px;
height:50px;
border: 1px gray solid;
display: flex;
align-items: center;
justify-content: center;
cursor:pointer;
}
.active01 {
background:gray;
}
.active02 {
color: white;
background: black;
}
</style>
</head>
<body>
<div class="tab" id="tab01">タブメニュー</div>
<div class="tab" id="tab02">タブメニュー</div>
<div class="tab" id="tab03">タブメニュー</div>
<div class="tab" id="tab04">タブメニュー</div>
</body>
</html>
