时间戳

首页 > 解决方案 > 试图突出显示活动菜单项

jquery - 试图突出显示活动菜单项

问题描述

这是我的显示侧边栏菜单的 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  
        });
    });

标签： jqueryhtmlcss

解决方案

你的逻辑几乎是正确的，但问题是$("a", this)。a该选择器正在寻找this. 问题是刚刚被点击this的a那个，所以你正在寻找一个a与a你所拥有的 HTML 结构不匹配的 inside。

要解决问题，您只需要使用$(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>

推荐阅读