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

Question

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

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