他ページから特定のタブを開いて遷移するタブメニューを実装したい

Question

■やりたいこと
・タブメニューを他ページからのリンクから該当のタブを開くようにしたい
・タブメニューをひとつではなく上下に２か所設置で連動して動作するようにしたい

■挙動がおかしい点
・上部のタブメニューのみ切り替わり、コンテンツ(.tab-panel)が切り替わらない。
・下部のタブメニューが連動しない

引用テキスト

<div class="tab-menu" id="top">
        <ul>
            <li id="tab1" class="current">コンテンツA</li>
            <li id="tab2">コンテンツB</li>
            <li id="tab3">コンテンツC</li>
        </ul>
    </div>

<section class="tab-panel">
コンテンツAの内容
</section>
<section class="tab-panel">
コンテンツBの内容
</section>
<section class="tab-panel">
コンテンツCの内容
</section>

<div class="tab-menu under">
        <ul>
            <li data-url="#top" class="current">コンテンツA</li>
            <li data-url="#top">コンテンツB</li>
            <li data-url="#top">コンテンツC</li>
        </ul>
    </div>

下記はタブメニューの記述は通常のタブメニューの切り替えの記述です。
上下のタブメニューは連動して、下のタブメニューを押すと#topにスクロールする使用です。

$(function() {
$('.tab-menu li').click(function() {
		var num = $(this).parent().children('li').index(this);
			$('.tab-menu').each(function(){
			$('li',this).removeClass('current').eq(num).addClass('current');
		});
		$('.tab-panel').hide().eq(num).show();
	}).first().click();
    
    
	$('.tab-menu.under li').click(function() {
    var speed = 400;
      var href= $(this).attr("data-url");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
	});
});

しかし、下記のページ遷移後の記述を追記するとうまく動作しません。

$(function() {
$(window).load(function(){
    var hash = location.hash;
    hash = (hash.match(/^#tab\d+$/) || [])[0];
    var tabname = hash.slice(4);
    var tabname = tabname - 1;
    var tabbar = tabname;
    $(".tab-panel").addClass('disnon');
    $(".tab-panel").eq(tabname).removeClass('disnon');
    $(".tab-menu li").removeClass('current');
    $(".tab-menu li").eq(tabbar).addClass('current');
    });
$('.tab-menu li').click(function() {
		var num = $(this).parent().children('li').index(this);
			$('.tab-menu').each(function(){
			$('li',this).removeClass('current').eq(num).addClass('current');
		});
		$('.tab-panel').hide().eq(num).show();
	}).first().click();
    
    
	$('.tab-menu.under li').click(function() {
    var speed = 400;
      var href= $(this).attr("data-url");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
	});
});

調べて色々な記述を組み合わせて試しているので、連動していないといことはわかるのですが、
どこの記述を変更していいのかわかりません。

$(".tab-panel").addClass('disnon');
    $(".tab-panel").eq(tabname).removeClass('disnon');
    $(".tab-menu li").removeClass('current');
    $(".tab-menu li").eq(tabbar).addClass('current');

var num = $(this).parent().children('li').index(this);
			$('.tab-menu').each(function(){
			$('li',this).removeClass('current').eq(num).addClass('current');
		});
		$('.tab-panel').hide().eq(num).show();

のあたりが重複だったり、競合してるのがわかるのですが.....

どうかご教授ください。

Answer 1

　$(window).load(...)は1.8から非推奨になり、3.0から削除されています。バージョンを確認してみてはどうですか？

This API has been removed in jQuery 3.0.
.load() | jQuery API Documentation

　また、そちらのコードは普通にロードイベントのハンドラ内に書かれていますから、その部分は重複していると思いますので、$(window).load()を削除して中身を直書きすればいいのではないでしょうか。

Answer 2

この記述でかいけつしました

$(function() {
$(window).load(function(){
    var hash = location.hash;
    hash = (hash.match(/^#tab\d+$/) || [])[0];
    var tabname = hash.slice(4);
    var tabname = tabname - 1;
    var tabbar = tabname;
    $(".tab-panel").hide()
    $(".tab-panel").eq(tabname).show();
    $(".tab-menu li").removeClass('current');
    $('.tab-menu').each(function(){
			$('li',this).removeClass('current').eq(tabbar).addClass('current');
		});
    });
	$('.tab-menu li').click(function() {
		var num = $(this).parent().children('li').index(this);
			$('.tab-menu').each(function(){
			$('li',this).removeClass('current').eq(num).addClass('current');
		});
		$('.tab-panel').hide().eq(num).show();
	}).first().click();
	$('.tab-menu.under li').click(function() {
    var speed = 400;
      var href= $(this).attr("data-url");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
	});
});