jQuery切换DIV元素href单击

Question

Hello Stackers，

我再次遇到jQuery问题。我会试着在右边有一个MENU，它应该显示特定的DIV元素。但是，它只是没有做任何事情，甚至没有返回控制台日志。 jQuery包含在Google Library中。

的jQuery

$().ready(function(){   
    $("#sedelnotif").hide();
    $("#staffnotif").hide();

    $('.allnotif').click(function(e) // bind a click event on the anchor tags
    {
      $("#allnotif").show(); 
      $("#sedelnotif").hide()
      $("#staffnotif").hide()
    });

     $('.sedelnotif').click(function(e) // bind a click event on the anchor tags
    {
      $("#sedelnotif").show(); 
      $("#allnotif").hide()
      $("#staffnotif").hide()
    });

     $('.staffnotif').click(function(e) // bind a click event on the anchor tags
    {
      $("#staffnotif").show(); 
      $("#allnotifn").hide()
      $("#sedelnotif").hide()
    });

  });

HTML - 菜单

  <a class="list-group-item" class="allnotif" href="#allnotif"><strong>Alle Notificaties</strong></a>
 <a class="list-group-item" class="sedelnotif" href="#sedelnotif">Gelezen & Verwijderd</a>
<a class="list-group-item" class="staffnotif" href="#staffnotif">Staffmededelingen</a>

HTML - 应更改的DIV

<div class="jumbotron"  style="width:80%; margin-left:-30px; margin-top:-19px;padding-bottom:30px;"> 
        <div id="allnotif">
            <?php if($notif_count < 1){ echo "<center><span class='help-block'>Je hebt op dit moment <u>geen</u> Notificaties<br><small style='color:rgba(0, 0, 0, 0.3);'>Maak je geen zorgen, je krijgt ze echt wel!</small></span></center>"; } ?>
        </div>
        <div id="sedelnotif">
            <?php if($notif_count < 1){ echo "<center><span class='help-block'>Je hebt op dit moment <u>geen</u> gelezen/verwijderde Notificaties<br><small style='color:rgba(0, 0, 0, 0.3);'>Je kan notificaties verwijderen of als gelezen markeren!</small></span></center>"; } ?>
        </div>
        <div id="staffnotif">
            <?php if($notif_count < 1){ echo "<center><span class='help-block'>Je hebt op dit moment <u>geen</u> Staffnotificaties<br><small style='color:rgba(0, 0, 0, 0.3);'>Spannend!</small></span></center>"; } ?>
        </div>
    </div>

我想要的是，如果有人点击另一个菜单项，它会显示div并隐藏其他菜单项。我做错了什么？

截图：

Answer 1

这里的问题是您要为每个链接分配两次class属性。 jQuery解析第一个类而不是第二个类，因此它们只是获取类.list-group-item而不是.allnotif，.sedelnotif和.staffnotif。这是他们应该看起来的样子：

<a class="list-group-item allnotif" href="#allnotif"><strong>Alle Notificaties</strong></a>
<a class="list-group-item sedelnotif" href="#sedelnotif">Gelezen &nbsp; Verwijderd</a>
<a class="list-group-item staffnotif" href="#staffnotif">Staffmededelingen</a>

一个工作小提琴（显然没有PHP）：https://jsfiddle.net/kcw9jhzk/

Answer 2

每个菜单项都有两个类属性。第二个被jQuery忽略。

<a class="list-group-item allnotif" href="#allnotif"><strong>Alle Notificaties</strong></a>

<强> Working demo