Нажатие на опции активного фильтра не работает

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 вообще не виден, поэтому то, что он должен делать, вообще не происходит , Я неправильно это расставил? Я начинающий, так что я не уверен, что не так. Кто-нибудь может мне помочь?

Answer 1

Ваш код работает нормально, вы просто пропустили добавление jQuery, добавьте это в раздел head в файле html <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Это добавит библиотеку jQuery в ваш проект, jQuery добавит кучу новых функций. Взгляните на документы здесь

$(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;
}

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <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>
</body>
</html>