タブメニューで内容を交互に表示し、現在表示されていないタブはクリック可能で、クリックすると切り替わるようにしたい

前提・実現したいこと
タブメニュー、タブメニューを選択した際の内容をすべて画像で作っています。
A（もしくはB）を選択している時の画像は、タブ（青or赤）部分を含め一枚の画像になっています。
タブメニューをクリックして交互に内容の画像を表示、その際、現在表示されていない内容のタグ（グレイのタグ）をクリックするとその内容を交互に表示するようにしたいです。
現状、A（赤）とB（青）のタグ部分は内容と一体化した画像になっていますが、別のものとして書き出すことも可能です。

下記イメージ

発生している問題・エラーメッセージ
エラーは出ていませんが、そもそもタブをクリックできない、Aを表示している際、Bをグレイのタブに⇔Bを表示している際、Aをグレイのタブに出来ません・・

HTML

				<div class="tab-panel">
					  <!--タブ-->
					  <ul class="tab-group">
						<li class="tab tab-A is-active">
							<img src="images/cta-before01.png"><!--Aグレイタブ-->	
						</li>
						<li class="tab tab-B">
							<img src="images/cta-before02.png"><!--Bグレイタブ-->													
						</li>
					 </ul>

					  <!--タブを切り替えて表示するコンテンツ-->
					  <div class="panel-group">
						  <div class="panel tab-A is-show">
							  <img src="images/cta-menu02.png" alt="" style="margin-bottom: 50px;"><!--Aを選択してる時の画像（タブ赤色部分と内容）-->
						  </div>
						  <div class="panel tab-B">
							  <img src="images/cta-menu01.png" alt="" style="margin-bottom: 50px;"><!---Bを選択してる時の画像（タブ青色部分と内容）-->
						  </div>
					  </div>
					</div>

css

.tab-panel {
    width: 800px;
	position: relative;
}
.tab-group {
	display: flex;
	justify-content: center;
	position: absolute;
	width: 100%;
	flex-flow: row-reverse;
}
.tab {
	flex-grow: 1;
	list-style:none;
	text-align:center;
	cursor:pointer;
	visibility: hidden;
}
.tab.tab-A {
    position: absolute;
    right: -3px;
}
.tab.tab-B {
    position: fixed;
}
.panel-group {
	border-top:none;
}
.panel {
	display:none;
}
.tab.is-active {
	transition: all 0.2s ease-out;
	visibility: visible;
}
.panel.is-show {
	display:block;
}

<script>
	document.addEventListener('DOMContentLoaded', function(){
  // タブに対してクリックイベントを適用
  const tabs = document.getElementsByClassName('tab');
  for(let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', tabSwitch, false);
  }

  // タブをクリックすると実行する関数
  function tabSwitch(){
    // タブのclassの値を変更
    document.getElementsByClassName('is-active')[0].classList.remove('is-active');
    this.classList.add('is-active');
    // コンテンツのclassの値を変更
    document.getElementsByClassName('is-show')[0].classList.remove('is-show');
    const arrayTabs = Array.prototype.slice.call(tabs);
    const index = arrayTabs.indexOf(this);
    document.getElementsByClassName('panel')[index].classList.add('is-show');
  };
}, false);
</script>

clickイベントを使うや、toggleを使うなど調べていろいろ考えたのですが、全然うまくいかず・・・
初学者で申し訳ございませんが、お力添えいただけると幸いです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

CSSの設定が全般的におかしいです。

まず、display: flex; でレイアウトするなら、position: absolute; position: fixed;などは削除しましょう。
両方設定するとお互いに干渉してうまくいきません。display: flex; だけで十分レイアウト可能です。

タブ,.tabにvisibility: hidden;を設定してますが、そうすると非表示になりタブをクリックできなくなります。
最終的にどうしたいのか分からないので、とりあえず透明度を変更するように変更してます。

そのほか、不明点は忖度していろいろ修正していますので、これを雛型にしてご希望のものに修正してください。

css
1.tab-panel {
2  width: 800px;
3}
4.tab-group {
5  display: flex;
6  justify-content: center;
7  width: 100%;
8  height: 50px;
9  padding: 0;
10}
11.tab {
12  list-style:none;
13  text-align:center;
14  cursor:pointer;
15  width: 50%;
16  opacity: .5;
17}
18.tab.tab-A {
19  background-color: red;
20}
21.tab.tab-B {
22  background-color: blue;
23}
24.panel-group {
25  border-top:none;
26}
27.panel {
28  display:none;
29}
30.tab.is-active {
31  transition: all 0.2s ease-out;
32  opacity: 1;
33}
34.panel.is-show {
35  display:block;
36}