尝试突出显示活动菜单项

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($) {&nbsp; $(".sidebar a").click(function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $(".sidebar a.active").removeClass("active");&nbsp; &nbsp; $(this).addClass("active");&nbsp; });});.active {&nbsp; color: #C00;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="sidebar">&nbsp; <a class="active" href="<website>/humrec.php">HR Homepage</a>&nbsp; <a href="<website>/hrbenefits.php">Benefits Information</a>&nbsp; <a href="#contact">Scheduling</a>&nbsp; <a href="#about">Links</a></div>