jQuery 切换 DIV 元素 href 点击

Question

你好堆垛机，

我又遇到了 jQuery 问题。我将尝试在右侧设置一个 MENU，它应该显示特定的 DIV 元素。但是，它什么也没做，甚至不返回控制台日志。 jQuery 包含在 Google 图书馆中。

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

这里的问题是您为每个链接分配了两次类属性。 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>

还有一个可用的 Fiddle(显然没有 PHP):https://jsfiddle.net/kcw9jhzk/