我正在嘗試創建一個像這里一樣的過濾器。我在 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腳本根本不可見，所以它應該做的事情根本不會發生。難道是我放錯地方了？我是前端初學者，所以不知道哪里出了問題。誰能幫我？