尝试突出显示活动菜单项

Question

这是我的 HTML，显示了侧边栏菜单：    <div class="sidebar">      <a class="active" href="<website>/humrec.php">HR Homepage</a>      <a href="<website>/hrbenefits.php">Benefits Information</a>      <a href="#contact">Scheduling</a>      <a href="#about">Links</a>    </div>这是我的 jQuery 代码，但仍然无法工作：    $(document).ready(function(){        $(".sidebar a").click(function ( e ) {            e.preventDefault();            $(".sidebar a.active").removeClass("active"); //Remove any "active" class              $("a", this).addClass("active"); //Add "active" class to selected tab              // $(activeTab).show(); //Fade in the active content          });    });

Answer 1

你的逻辑几乎是正确的，但问题是$("a", this)。该选择器正在寻找a中的元素this。问题是this是a刚刚被单击的，所以您正在寻找a中的a，它与您所拥有的 HTML 结构不匹配。

要解决该问题，您只需使用$(this)引用所a单击的：

jQuery(function($) {

  $(".sidebar a").click(function(e) {

    e.preventDefault();

    $(".sidebar a.active").removeClass("active");

    $(this).addClass("active");

  });

});

.active {

  color: #C00;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="sidebar">

  <a class="active" href="<website>/humrec.php">HR Homepage</a>

  <a href="<website>/hrbenefits.php">Benefits Information</a>

  <a href="#contact">Scheduling</a>

  <a href="#about">Links</a>

</div>