单击活动过滤器的选项不起作用
我正在尝试创建一个像这里一样的过滤器。
我在 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脚本根本不可见，所以它应该做的事情根本不会发生。难道是我放错地方了？我是前端初学者，所以不知道哪里出了问题。谁能帮我？
汪汪一只猫0回答
-
jeck猫
您的代码工作正常，您只是错过了添加 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>
随时随地看视频慕课网APP
相关分类
Html5