wordpressでタブが切り替えがうまくいきません

前提

wordpressを使用しています。
タブの切り替えがうまくいきません。
一瞬切り替わるのですが、ページのトップに戻ってしまします。（タブの内容も1番目のタブの内容が表示されています）

実現したいこと

タブを切り替えて、内容を表示させる

該当のソースコード

php

<ul class="tab-group"> <li><a href="" class="tab A is-active">aタブ</a></li> <li><a href="" class="tab B">bタブ</a></li> <li><a href="" class="tab C">cタブ</a></li> </ul><div class="area-group"> <div id="Atab" class="area is-show">　　　タブの中身 　</div> <div id="Btab" class="area">　　　タブの中身 　</div> <div id="Ctab" class="area">　　　タブの中身 　</div></div>

javascript

jQuery(function($){ $('.tab').on('click',function(){ var idx=$('.tab').index(this); $(this).addClass('is-active').siblings('.tab').removeClass('is-active'); $(this).closest('.tab-group').next('.area-group').find('.area').removeClass('is-show'); $('.area').eq(idx).addClass('is-show'); });});

質問内容が分かりにくかったら申し訳ございません。
どなたかわかる方いらっしゃいましたらご教授お願いいたします。