タブをクリックした時のクラスの付与・除去について

Question

どなたか回答お願いいたします。

問題
クリックしているタブ(A)のborder-bottomが切り替わりません。

jQuery を使い、複数あるタブをクリックしたら切り替わるようにタブとエリアにクラス名の付与・除去を行いました。

同じタブをページ上部と下部に用意したのですが、上部のタブ(A)のborder-bottomだけが切り替わりません。
下部のタブ(B)のborder-bottomは切り替わります。
(A)には.activeがなぜかついてくれません。

よろしくお願いいたします。

<!-- 上部のタブ(A) -->
<ul class="tab">
      <li id="one_tab" class="one_tab">
        <a href="#tab01">
          company profile<span class="tab_inner">会社概要</span>
        </a>
      </li>
      <li class="one_tab">
        <a href="#tab02">
          service center<span class="tab_inner">サービスセンターのご案内</span>
        </a>
      </li>
      <li class="one_tab">
        <a href="#tab03">
          social contributions<span class="tab_inner">社会貢献活動</span>
        </a>
      </li>
    </ul>

タブコンテンツ内はちゃんと作動するので省力。

<!-- 下部のタブ(B) -->
<ul class="tab">
        <li class="one_tab">
          <a href="#tab01">
            <button type="button" onclick="location.href='#tab01-back'">
              company profile<span class="tab_inner">会社概要</span>
            </button>
          </a>
        </li>
        <li class="one_tab">
          <a href="#tab02">
            <button type="button" onclick="location.href='#tab02-back'">
              service center<span class="tab_inner">サービスセンターのご案内</span>
            </button>
          </a>
        </li>
        <li class="one_tab">
          <a href="#tab03">
            <button type="button" onclick="location.href='#tab03-back'">
              social contributions<span class="tab_inner">社会貢献活動</span>
            </button>
          </a>
        </li>
      </ul>

.tab{
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
    padding: 0 0 8rem 0;
    max-width: 1160px;
}

.tab li {
   font-size: 2rem;
	color: #343434;
	cursor: pointer;
	flex: 1;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
    border-bottom: 1px solid #343434; /* これがクリック前 */
     margin:0 3rem;
     display: inline-block;
     font-family: 'Josefin Sans';
}

/*liにactiveクラスがついた時の形状*/
/* .tab li.active a */
.tab li.active {
  background:#fff;
  border-bottom: 5px solid #343434; 　/* これがクリック後 */
}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	/* padding:50px 20px; */
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

function GethashID (hashIDName){
	if(hashIDName){
		$('.tab li').find('a').each(function() { 
			var idName = $(this).attr('href'); 
			if(idName == hashIDName){ 
				var parentElm = $(this).parent(); 
				$('.tab li').removeClass("active"); 
				$(parentElm).addClass("active"); 
				$(".area").removeClass("is-active");
				$(hashIDName).addClass("is-active");
			}
		});
	}
}

//タブをクリックしたら
$('.tab a').on('click', function() {
	var idName = $(this).attr('href');
	GethashID (idName);
	return false;
});


// 上記の動きをページが読み込まれたらすぐに動かす
$(window).on('load', function () {
    $('.tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加
    $('.area:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加
	var hashName = location.hash; //リンク元の指定されたURLのハッシュタグを取得
	GethashID (hashName);//設定したタブの読み込み
});

Answer 1

about.phpのhtml内にareaクラスが設定されていないからでは？

Comments

[D.S]

すいません、先に回答頂いた方ので試したら解決いたしました。
貴重なお時間割いて頂きありがとうございました。

Answer 2

本質的な回答になっていないんですが、以下のようにすると動きました。（なぜでしょうかね…？）

---

GethashID() 内

$('.tab li').removeClass("active")
// 若干遅らせるとなぜか動く
setTimeout(() => {
  $(parentElm).addClass("active");
}, 10)

Comments

[D.S]

記載の通りしてみたらなぜか反映されました。ありがとうございます。