タブの中身が非表示にならない

https://www.radia.jp/archives/1183を参考に、
別ページから任意のタブにダイレクトリンクして
そのタブだけを表示できるようにしたいと考えています。

上記ページのコードをほとんど丸写ししたにもかかわらず、
どこかで写しをミスしているのか
全てのタブの中身が表示されっぱなしになってしまいます…
選択中のタブの中身のみ表示されるように修正したいです。

前提・実現したいこと

・インデックスページ内の一部をタブで表示できるようにしたい
・デフォルトの状態ではすべてのタブの中身が非表示
・ハンバーガーメニューで各タブの中身に飛びたい
・別ページのハンバーガーメニューから各タブの中身に飛びたい

発生している問題・エラーメッセージ

全てのタブが開閉できない（開きっぱなしになっている）

該当のソースコード

html
1<div id="wrap">
2<div class="ul-wrap">
3	<ul class="tabs-nav">		 
4        <li>
5			<a href="#tab1" class="active">
6			<img src="img/link01.png" alt="#"></a></li>
7		 
8        <li>
9			<a href="#tab2">
10			<img src="img/link02.png" alt="#"></a></li>
11		 
12        <li>
13			<a href="#tab3">
14			<img src="img/link03.png" alt="#"></a></li>
15      </ul> 
16</div>
17	
18  <div class="tab-content" id="tab1">
19	(tab1の中身)
20  </div>
21
22 <div class="tab-content" id="tab2">
23	(tab2の中身)
24 </div>
25
26<div class="tab-content" id="tab3">
27	(tab3の中身)
28</div>
29</div>

Javascript
1<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2<script>
3$(function () {
4  var hash = location.hash;
5
6  $(window).load(function() {
7    if(hash){
8      var target = $('.tabs-nav li a[href$="' + hash + '"]');
9
10      if(target.length > 0){
11        $('.tabs-nav li a').removeClass('active');
12        target.addClass('active');
13      }
14    }
15
16// タブ切替
17$('.tab-content:not('+$('.tabs-nav li a.active').attr('href')+')').hide();
18    $('.tabs-nav li a').click(function(){
19      $('.tabs-nav li a').removeClass('active');
20      $(this).addClass('active');
21      $('.tab-content').hide();
22      $($(this).attr('href')).fadeIn();
23      return false;
24    });
25  });
26});
27</script>

css
1.ul-wrap{
2	background: #ccc;
3
4}
5ul{
6	max-width: 960px;
7	margin: 0 auto;
8	padding: 20px 10px;
9	display: flex;
10	justify-content: space-between;	
11}
12.tabs-nav li{
13	max-width: 98%;
14	-webkit-backface-visibility: hidden;
15}