[英]How to hide <li> with jquery?
I have two <ul></ul>
elements. 我有两个
<ul></ul>
元素。 One that has links and the other with content I want to display depending on which link is clicked on. 一个包含链接,另一个包含我要显示的内容,具体取决于单击哪个链接。 Here's the code for the
<ul>'s
: 这是
<ul>'s
的代码:
<div class="container">
<ul id="filter">
<li class="current"><a href="#">Attendess (Middle School/High School Students)</a></li>
<li><a href="#">Attendees (College Students)</a></li>
<li><a href="#">Mentor/Vounteer</a></li>
</ul>
<ul id="forms">
<li class="Attendess (Middle School/High School Students)"> <% include ./forms/Students %> </li>
<li class="Attendees (College Students)"> <% include ./forms/college %> </li>
<li class="Mentor/Vounteer"> <% include ./forms/attendees %> </li>
</ul>
Now with jQuery, I implemented the functionality to select different filters but when I do my forms don't hide. 现在使用jQuery,我实现了选择不同过滤器的功能,但是当我这样做时,表单不会隐藏。
Here's the code for that: 这是该代码:
<script type="text/javascript">
$(document).ready(function(){
$("#filter a").click(function(){
$("#filter .current").removeClass("current");
$(this).parent().addClass("current");
var filterVal = $(this).text();
$("#forms li").fadeIn();
$("#forms li").not("." + filterVal).fadeOut();
});
});
Let me know what you guys think? 让我知道你们的想法吗?
I have changed some part of your code. 我已经更改了部分代码。 A class must not be spaced.
一个类不能间隔。 A spaced class means: multiple classes.
间隔的类表示:多个类。
$(document).ready(function() { $("#filter a").click(function() { $("#filter .current").removeClass("current"); $(this).parent().addClass("current"); var filterVal = $(this).data('index'); $("#forms li").fadeIn(); $("#forms li:not(." + filterVal + ")").hide(); }); });
.college, .attendees { display: none; } a:hover{ cursor:pointer; text-decoration:underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <ul id="filter"> <li class="current"><a data-index="students">Attendess (Middle School/High School Students)</a></li> <li><a data-index="college">Attendees (College Students)</a></li> <li><a data-index="attendees">Mentor/Vounteer</a></li> </ul> <ul id="forms"> <li class="students"> <% include ./forms/Students %> </li> <li class="college"> <% include ./forms/college %> </li> <li class="attendees"> <% include ./forms/attendees %> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.