タブメニューでの確認ダイアログの使用について

実現したいこと

Javascriptを使ったタブメニューの作り方をWebで検索し，実装しました。
タブメニュー3つのうち1つのみ（TabC），クリック時に確認ダイアログを表示し，
キャンセルがクリックされた場合はそのタブを開けないようにしたいと考えています。

発生している問題

現在のコードだと，確認ダイアログは表示されますが，
Cancelを押しても当該のタブが表示されてしまいます。
Cancelを押した場合は現在のタブに止まるようにするにはどうしたらいいか，
ご教示いただけますと幸いです。

該当のソースコード

HTML
1<div class="navi">
2  <ul class="tab-group">
3    <li class="tab tab-A is-active">Tab A</li>
4    <li class="tab tab-B">Tab B</li>
5    <li class="tab tab-C" id="btn">Tab C</li>  
6 </ul>
7</div>
8
9<div class="panel-group">
10  <div class="panel tab-A is-show">
11     <iframe class="tabcon" src="XX.html" width="100%" height="550px" ></iframe>
12  </div>
13  <div class="panel tab-B">
14     <iframe class="tabcon" src="XX.html" width="100%" height="900px"></iframe>
15   </div>
16   <div class="panel tab-C">
17     <iframe class="tabcon" src="XX.html" width="100%" height="900px"></iframe>
18   </div>
19</div>

Javascript
1document.addEventListener('DOMContentLoaded', function(){
2    // タブに対してクリックイベントを適用
3    const tabs = document.getElementsByClassName('tab');
4    for(let i = 0; i < tabs.length; i++) {
5      tabs[i].addEventListener('click', tabSwitch, false);
6    }
7  
8    // タブをクリックすると実行する関数
9    function tabSwitch(){
10      // タブのclassの値を変更
11      document.getElementsByClassName('is-active')[0].classList.remove('is-active');
12      this.classList.add('is-active');
13      // コンテンツのclassの値を変更
14      document.getElementsByClassName('is-show')[0].classList.remove('is-show');
15      const arrayTabs = Array.prototype.slice.call(tabs);
16      const index = arrayTabs.indexOf(this);
17      document.getElementsByClassName('panel')[index].classList.add('is-show');
18    };
19  }, false);
20
21const btn = document.getElementById('btn')
22btn.addEventListener('click', function(event) {
23    var result = window.confirm('リンクを開きますか？');
24    if(!result) {
25         event.preventDefault();
26    }
27})

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

回答2件

ベストアンサー

こんな感じですかね

javascript
1<style>
2.is-active{
3  background-Color:red;
4}
5.panel:not(.is-show){
6display:none;
7}
8 </style>
9<script>
10window.addEventListener('DOMContentLoaded', function(){
11  document.querySelectorAll('.tab').forEach(x=>{
12    x.addEventListener('click',e=>{
13      let flg=false;
14      const t=e.target;
15      if(t.matches(':not(.confirm)') || (flg = window.confirm('リンクを開きますか？'))){
16        document.querySelector('.tab.is-active').classList.remove('is-active');
17        t.classList.add('is-active');
18        document.querySelector('.panel.is-show').classList.remove('is-show');
19        const idx=[...document.querySelectorAll('.tab')].indexOf(t);
20        [...document.querySelectorAll('.panel')][idx].classList.add('is-show');
21      }
22    });
23  });
24});
25</script>
26<div class="navi">
27  <ul class="tab-group">
28    <li class="tab tab-A is-active">Tab A</li>
29    <li class="tab tab-B">Tab B</li>
30    <li class="tab tab-C confirm">Tab C</li>  
31    <li class="tab tab-D confirm">Tab D</li>  
32 </ul>
33</div>
34
35<div class="panel-group">
36<div class="panel tab-A is-show">a</div>
37<div class="panel tab-B">b</div>
38<div class="panel tab-C">c</div>
39<div class="panel tab-D">d</div>
40</div>