Question

我想根据点击的链接显示/隐藏UL，不确定这是否是最佳方式？

JS小提琴：http://jsfiddle.net/zangief007/rj8g0yh4/1/

HTML：

<ul class="category-1 group">
    <li class="name">JOHN Smithe QC</li>
    <li class="call">DDI <span>09 333 4545</span></li>
    <li  class="call">MOB  <span>027 545 6987</span></li>
    <li><a href="mailto:david.heaney@heaneypartners.com">david.heaney@heaneypartners.com</a></li>
</ul>
    <ul class="category-3 group">
    <li class="name">Barry White</li>
    <li class="call">DDI <span>021 487 5896</span></li>
    <li  class="call">MOB  <span>024 787 9854</span></li>
    <li><a href="mailto:susan.thodey@heaneypartners.com">susan.thodey@heaneypartners.com</a></li>
</ul>
<ul class="category-2 group">
    <li class="name">Peter Pan</li>
    <li class="call">DDI <span>231234</span></li>
    <li  class="call">MOB  <span>234234</span></li>
    <li><a href="mailto:23423423423">23423423423</a></li>
</ul>

JS：

$(document).ready(function () {
               $(function() {
                   var curPage="";
                $("#selectMe-desk li a").click(function() {
                    if (curPage.length) { 
                $("#"+curPage).hide();
                }
                curPage=$(this).data("category-");
                $(""+curPage).show();
                    });
                });
            });

Answer 1

您的JS和HTML都有几个错误。我还简化了你的代码。以下是固定版本：http://jsfiddle.net/rj8g0yh4/2/

HTML：

<ul class="filter-desk" id="selectMe-desk">
  <li class="category-1"><a class="active" href="#" data-page="category-1">Partners</a></li>
  <li class="category-2"><a class="" href="#" data-page="category-2">Consultants</a></li>
  <li class="category-7"><a class="" href="#" data-page="category-7">Senior Associates</a></li>
  <li class="category-8"><a class="" href="#" data-page="category-8">Associates</a></li>
  <li class="category-9"><a class="" href="#" data-page="category-9">Solicitors</a></li>
  <li class="category-10"><a class="" href="#" data-page="category-10">Management</a></li>
  <li class="category-3"><a class="" href="#" data-page="category-3">PA's</a></li>
</ul>

<ul class="category-1 group">    
    <li class="name">JOHN Smithe QC</li>
    <li class="call">DDI <span>09 333 4545</span></li>
    <li class="call">MOB <span>027 545 6987</span></li>
    <li><a href="mailto:david.heaney@heaneypartners.com">david.heaney@heaneypartners.com</a></li>
</ul>
<ul class="category-3 group">
    <li class="name">Barry White</li>
    <li class="call">DDI <span>021 487 5896</span></li>
    <li class="call">MOB <span>024 787 9854</span></li>
    <li><a href="mailto:susan.thodey@heaneypartners.com">susan.thodey@heaneypartners.com</a></li>
</ul>
<ul class="category-2 group">
    <li class="name">Peter Pan</li>
    <li class="call">DDI <span>231234</span></li>
    <li class="call">MOB <span>234234</span></li>
    <li><a href="mailto:23423423423">23423423423</a></li>
</ul>

JS：

$(function() {
    $('.group').hide();
    $('.category-1').show();
    $("#selectMe-desk li a").click(function() {
        var $a = $(this);
        $(".group").hide().filter("."+$a.data("page")).show();
    });
});

根据点击的链接显示/隐藏UL

1 个答案: