首页 > javascript > 根据点击的链接显示/隐藏UL

根据点击的链接显示/隐藏UL (Show / Hide UL based on link clicked)

问题

我想根据点击的链接显示/隐藏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();
                    });
                });
            });

解决方法

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

问题

I would like to show / hide UL's based on what link is clicked, not sure if this is the best way?

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

解决方法

You had several errors in both your JS and HTML. I also simplified bits of your code. Here is the fixed version: 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();
    });
});
相似信息