jQueryのタブ切り替えでアクティブと非アクティブでそれぞれ色を変えたい

Question

下記イメージ図のようにアクティブ時は背景を白で文字とタブとパネルのボーダーは各タブの色、
非アクティブ時は文字を白でタブの背景をボーダーと同じ色にして塗りつぶし、という感じにしたいのですがうまくいきません。
現状は全てがアクティブされている状態になってしまっており、切り替えはできるのですが、非アクティブ時のCSSが適用されていないと行った感じです。

<section id="charact" class="charact">
			<div class="ct_1000">
				<h2 class="title-border ttl">会社の特徴</h2>
				<!--Tab-->
				<ul class="tab-group">
					<li class="tab tab_1 is-active is-active_1">特徴１</li>
					<li class="tab tab_2 is-active is-active_2">特徴２</li>
					<li class="tab tab_3 is-active is-active_3">特徴３</li>
					<li class="tab tab_4 is-active is-active_4">特徴４</li>
				</ul>

				<!--Tab Contents-->
				<div class="panel-group">
					<div class="panel is-show">
						<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						<img src="images/tab.png" alt="">
					</div>
					<div class="panel">特徴２の内容</div>
					<div class="panel">特徴３の内容</div>
					<div class="panel">特徴４の内容</div>
				</div>
			</div>
		</section>
		<section id="concept" class="concept">
			<div class="ct_1000">
				<h2 class="title-border ttl">コンセプト</h2>
				<div class="consept_ct">
					<div class="concept_ct_l">
						<img src="images/concept_1.jpg" alt="コンセプト1">
					</div>
					<div class="concept_ct_r">
						<div class="concept_image">
							<img src="images/concept_1.jpg" alt="コンセプト1">
							<img src="images/concept_2.jpg" alt="コンセプト2">
							<img src="images/concept_3.jpg" alt="コンセプト3">
						</div>
						<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br><br>
						テキストテキストテキストテキスト<br><br>
						テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
						テキストテキストテキストテキストテキストテキスト<br><br>
						テキストテキストテキストテキストテキストテキストテキスト</p>
					</div>
				</div>
			</div>
		</section>

/*charact*/
	.charact{
		width:100%;
		height:615px;
	}
	.charact .tab-group{
		display: flex;
		justify-content: center;
	}
	.charact .tab-group .tab_1{
		height:40px;
		flex-grow: 1;
		list-style:none;
		border:solid 2px #ff9000;
		text-align:center;
		line-height:40px;
		font-size:20px;
		font-weight:bold;
		cursor:pointer;
		background:#ff9000;
		color:#fff;
	}
	.charact .tab-group .tab_2{
		height:40px;
		flex-grow: 1;
		list-style:none;
		border:solid 2px #3ebc01;
		text-align:center;
		line-height:40px;
		font-size:20px;
		font-weight:bold;
		cursor:pointer;
		background:#3ebc01;
		color:#fff;
	}
	.charact .tab-group .tab_3{
		height:40px;
		flex-grow: 1;
		list-style:none;
		border:solid 2px #1e1efc;
		text-align:center;
		line-height:40px;
		font-size:20px;
		font-weight:bold;
		cursor:pointer;
		background:#1e1efc;
		color:#fff;
	}
	.charact .tab-group .tab_4{
		height:40px;
		flex-grow: 1;
		list-style:none;
		border:solid 2px #fc1e77;
		text-align:center;
		line-height:40px;
		font-size:20px;
		font-weight:bold;
		cursor:pointer;
		background:#fc1e77;
		color:#fff;
	}
	
	.charact .panel-group{
		height:400px;
		border:solid 1px #ff9000;
		border-top:none;
		background:#eee;
	}
	.charact .panel-group .panel{
		display:none;
	}
	.charact .tab.is-active_1{
		background:#fff;
		color:#ff9000;
		font-weight:bold;
		transition: all 0.2s ease-out;
	}
	.charact .tab.is-active_2{
		background:#fff;
		color:#3ebc01;
		font-weight:bold;
		transition: all 0.2s ease-out;
	}
	.charact .tab.is-active_3{
		background:#fff;
		color:#1e1efc;
		font-weight:bold;
		transition: all 0.2s ease-out;
	}
	.charact .tab.is-active_4{
		background:#fff;
		color:#fc1e77;
		font-weight:bold;
		transition: all 0.2s ease-out;
	}
	.charact .panel.is-show{
		display:block;
	}

<script>
		$(function($){
			$('.tab').click(function(){
				$('.is-active').removeClass('is-active');
				$(this).addClass('is-active');
				$('.is-show').removeClass('is-show');
				const index = $(this).index();
				$('.panel').eq(index).addClass('is-show');
			});
		});
	</script>

どなたか教えてください、、、！

Comments

[mix-peach]

そこまで自分で出来たのでしたら、あと少しだと思います。
・非アクティブのスタイル
・アクティブのスタイル
まずはこの2つを記述した要素・クラスが正しいのか、
実際に「クラスの付け外し」を行っているのはjsですので、コードを確認しつつ見直しましょう。

[gerick]

jsが動いてるのは検証で確認できているのですが、何故現在表示されているのがアクティブのタブ色で、非アクティブの色が出ないのか原因が全くわかりません、、、
イメージとしてはtab_1をクリックした時にis-active_1を付与してスタイルを反映させると行った形でしょうか？ただそれだとtab_2をクリックした時にis-active_1が付与されて結局それぞれの色の反映が難しい気がしていて、頭がこんがらがってます。

[gerick]

パネルの切り替えは一旦置いているのですが、そもそもタブのスタイル切り替えがうまくいかないので、そっちがうまくいけば同じ要領でパネルも打開できると思うのですが、、、。

Answer 1

    .charact .tab.is-active_1{

↓

    .charact .tab.is-active_1.is-active{

とすればいいと思います。（1～4で同様）

Comments

[gerick]

それみてやっとりかいできました！！！
コーディングがぐちゃぐちゃなのできずきにくかったです。。。
ありがとうございます！！