正在尝试突出显示活动菜单项

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)。该选择器正在this中查找a元素。问题是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>