时间戳

首页 > 解决方案 > 单击有源过滤器的选项不起作用

javascript - 单击有源过滤器的选项不起作用

问题描述

我正在尝试创建一个像这里这样的过滤器。

我已经在 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 脚本根本不可见，所以它应该做什么，根本不会发生。我放错了吗？我是前端初学者，所以不知道哪里出了问题。谁能帮我？

标签： javascripthtmlcss

解决方案

您的代码工作正常，您只是错过了添加 jQuery，将其添加到您的 html 文件的 head 部分<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>

推荐阅读