htmlに埋め込んだスクリプトで$が定義されていませんのエラーとなる

まだhtml、CSS、Javascriptの勉強を始めたばかりなのでかなり初歩的な質問で申し訳ございません。
タブのある簡単なページを練習で作成しています。
Javascriptのソースコードで

Uncaught ReferenceError: $ is not defined
at HTMLDocument.<anonymous> (index.html:72)

といったエラーが出てしまいます。
（検証はChromeで行っています）

下記にソースコードを貼り付けます。
宜しくお願いいたします。

<html>
<head>
<title>ホームページ作成</title>
<meta charset="UTF-8">
</head>
<body>
<h1>お試しホームページ</h1>
<p>勉強用ホームページ</p>
<ul class="tab1">
	<li class="tab1__item on"><span class="tab1__link" data-tab-body="1">タブ１</span>
	<li class="tab1__item"><span class="tab1__link" data-tab-body="2">タブ２</span>
	<li class="tab1__item"><span class="tab1__link" data-tab-body="3">タブ３</span>
	<li class="tab1__item"><span class="tab1__link" data-tab-body="4">タブ４</span>
</ul>

<div class="tab1-body">
 <div class="tab1-body__item tab1-body__item--1 on">
    このホームページについて
 </div>
  <div class="tab1-body__item tab1-body__item--2">
    プロフィール
 </div>
  <div class="tab1-body__item tab1-body__item--3">
    今まで参画したプロジェクト
 </div>
  <div class="tab1-body__item tab1-body__item--4">
    今後挑戦していきたいこと   
  </div>
 </div>
 
<style>	   	  
.tab1{
	display:flex;
	flex-direction:row;
	text-align:center;
	background-color:#fff !important;
	margin:0!important;
}

.tab1__item{
	flex:1;
	flex-basis:120px;
}

.tab1__link{
	display:block;
	text-decoration:none;
	color:#fff;
	background-color:#65c6ba;
	cursor:pointer;
	border-top-right-radius:15px;
	border-top-left-radius:15px;
}

.tab1__link.on{
	background-color:#b1e2dc;
}

.tab1-body__item{
	margin: 30px 15px;
    display: none;
    text-align: center;
}

.tab1-body__item.on{
	display:block;
}
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var $tab__link = $('.tab1__link')
    var $tab_body_item = $('.tab1-body__item')
    $tab__link.on('click', function (e) {
      var target = $(e.currentTarget)
      //タブの表示非表示
      $tab__link.removeClass('on')
      target.addClass('on')
      //タブの中身の表示非表示
      var num = target.data('tab-body')
      $tab_body_item.removeClass('on')
      $('.tab1-body__item--' + num).addClass('on')
    })
  })
</script>

 </body>
</html>