<a>リンクでページ内移動を制御したい jQuery

Question

前提・実現したいこと

以下サイトなのですが、
https://infinity-mobius.com/solution

カテゴリのタグを押すとそれぞれのコンテンツを表示させるよう開発しました。
以下ページを参考としております。

https://coco-factory.jp/ugokuweb/move01/5-4-1/

しかし、<a>タグを使ったコードなので、
タブをクリックすると、ページ内リンクで下に移動してしまいます。
タブとしての機能だけ反映したいのですが、ページ遷移させないようにできるでしょうか。

jQuery

<script type="text/javascript">
  //任意のタブにURLからリンクするための設定
function GethashID (hashIDName){
  if(hashIDName){
    //タブ設定
    $('.tab li').find('a').each(function() { //タブ内のaタグ全てを取得
      var idName = $(this).attr('href'); //タブ内のaタグのリンク名（例）#lunchの値を取得 
      if(idName == hashIDName){ //リンク元の指定されたURLのハッシュタグ（例）http://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
        var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
        $('.tab li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き
        $(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
        //表示させるエリア設定
        $(".area").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
        $(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加 
      }
    });
  }
}


//タブをクリックしたら
$('.tab a').on('click', function() {
  var idName = $(this).attr('href'); //タブ内のリンク名を取得  
  GethashID (idName);//設定したタブの読み込みと
  return false;//aタグを無効にする
});


// 上記の動きをページが読み込まれたらすぐに動かす
$(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);//設定したタブの読み込み
});

</script>

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

Answer 1

stopImmediatePropagationで、他のイベントリスナを止めてしまうのがお手軽かもしれません。

$('.tab a').on('click', function(e) {   // 変更
  e.stopImmediatePropagation()          // 変更
  var idName = $(this).attr('href'); //タブ内のリンク名を取得
  GethashID (idName);//設定したタブの読み込みと
  return false;//aタグを無効にする
});

ただ、他のクリックイベントを全て止めてしまうので、他に影響が出ないか、将来的に問題はないか、確かめる必要があると思います。

---

ややお手軽でない方法としては、hrefではなくてdata-属性を使うのがいいと思います。

Comments

[WPJ]

上記ソースで一発でなおりました。
ありがとうございました。
他に影響が出ないか、将来的に問題はないか、追加で検討したいと思います。

[Lhankor_Mhy]

お役に立てたようで何よりです。

このやり方は、ほんとに「とりあえず手っ取り早く」というものですので、お含みおきください。

Answer 2

タブきりかえするならlabelでラジオボタンを制御する手もあります

<style>
[name=tab]{
display:none;
}
nav ul{
display:flex;
}
nav ul,nav,li{
  list-style:none;
margin:0;
padding:0;
}

#tab1:not(:checked) ~ * #area1,
#tab2:not(:checked) ~ * #area2,
#tab3:not(:checked) ~ * #area3{
display:none;
}
#tab1:checked ~ * [for=tab1],
#tab2:checked ~ * [for=tab2],
#tab3:checked ~ * [for=tab3]{
background-Color:yellow;
}
</style>
<input type="radio" name="tab" value="1" id="tab1" checked>
<input type="radio" name="tab" value="2" id="tab2">
<input type="radio" name="tab" value="3" id="tab3">
<nav>
<ul>
<li><label for="tab1">1</label></li>
<li><label for="tab2">2</label></li>
<li><label for="tab3">3</label></li>
</ul>
</nav>
<div>
<div id="area1">area1</div>
<div id="area2">area2</div>
<div id="area3">area3</div>
</div>

Answer 3

カテゴリのタグをスムーススクロール対象から除外すればよいと思います。
特定のリンクをスムーススクロールさせないように除外させる | g lance