Trying to highlight active menu item

Question

Here is my HTML that shows the sidebar menu:

 <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>

Here is the jQuery code I have, still not working though:

 $(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 }); });

$("a", this) looking for anchors inside of the anchor

epascarello
– epascarello

2020-03-19 15:21:28 +00:00
Commented Mar 19, 2020 at 15:21 — epascarello
– epascarello, Commented Mar 19, 2020 at 15:21

Rory McCrossan · Accepted Answer · 2020-03-19 15:19:38Z

You logic is almost correct, however the issue is $("a", this). That selector is looking for an a element within this. The problem is that this is the a which was just clicked, so you're looking for an a within an a, which doesn't match the HTML structure you've got.

To fix the problem you just need to use $(this) to reference the a which was clicked:

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>

Thank you! This works, but now my url is staying the same when switching menu items.
That's because you've used preventDefault() which stops the page redirection. If you want to highlight the current page link when changing page you need to do this in a completely different way. You would need to recognise the new page as it loads and then put the class on the matching link within the JS of that page, not the one on which the link was clicked.

Collectives™ on Stack Overflow

Trying to highlight active menu item

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related