Question

我有两个<ul></ul>元素。一个有链接，另一个有我要显示的内容，具体取决于点击的链接。这是<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>

现在使用jQuery，我实现了选择不同过滤器的功能，但是当我做我的表单时不会隐藏。

以下是代码：

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

让我知道你们的想法？

Answer 1

我已经更改了部分代码。一个班级不能间隔开。间隔类意味着：多个类。

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

如何使用jquery隐藏<li>？

1 个答案: