单击活动过滤器的选项不起作用

Question

我正在尝试创建一个像这里一样的过滤器。我在 HTML 文件中编写了一些代码，方面是相同的，但 JavaScript 不起作用，这意味着如果我单击默认情况下处于活动状态的其他选项，则不会发生任何情况。$(document).ready(function() {  $("#filter-bar li").click(function() {    $("#filter-bar li").removeClass("active");    $(this).addClass("active");    $("#filter-bar").removeClass().addClass($(this).attr("data-target"));  });})body {  background-color: #eee;  margin: 0;  padding: 0;  font-family: Tahoma;}h2 {  text-align: center;}#filter-bar {  width: 100%;  margin: 0;  padding: 0;  height: 36px;  display: inline-flex;}#wrapper-filter {  background-color: #fff;  width: 570px;  height: auto;  margin: 30px auto;  border-radius: 30px;  box-sizing: border-box;}#filter-bar li {  width: 190px;  background-color: transparent;  text-align: center;  list-style-type: none;  z-index: 10;  cursor: pointer;  font-family: Open Sans, sans-serif;  font-weight: 100;  font-size: 15px;  line-height: 36px;}.pill {  position: absolute;  width: 190px;  height: 38px;  background-color: #39c;  border-radius: 30px;  color: #444;  z-index: 10;  border: 5px solid #eee;  box-sizing: border-box;}.filter-option {  transition: color 500ms;}#filter-bar.option-1 .pill {  margin-left: 0px;  transition: margin-left 200ms ease;}#filter-bar.option-2 .pill {  margin-left: 187px;  transition: margin-left 200ms ease;}#filter-bar.option-3 .pill {  margin-left: 380px;  transition: margin-left 200ms ease;}.option-1.active,.option-2.active,.option-3.active {  color: #fff;  transition: color 200ms;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h2>Animated filter selector</h2><div id="wrapper-filter">  <ul id="filter-bar">    <span class="pill"></span>    <li class="filter-option option-1 active" data-target="option-1">Books</li>    <li class="filter-option option-2" data-target="option-2">Shoes</li>    <li class="filter-option option-3" data-target="option-3">Toys</li>  </ul></div>所以，我认为Javascript脚本根本不可见，所以它应该做的事情根本不会发生。难道是我放错地方了？我是前端初学者，所以不知道哪里出了问题。谁能帮我？