Question

I’m new to JQuery but am finding it really useful. I’m trying to highlight the navigation item for the current page a user is on using JQuery. I’ve tried several of the techniques I’ve found that are similar, but I can’t get anything to work quite right and I wonder if it’s because I’m using dropmenu.js and that may be causing some issues.

I’ve created a CSS class called .selected which does what I need it to when applied manually to a nav item. I’ve then got the following JQuery code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('#nav-one li a').click(function() {
$(this).closest("li").addClass('selected').siblings().removeClass('selected');
return(false);  
});
</script>

And my menu looks like this:

<ul id="nav-one" class="dropmenu css-only">
<li><a href="index.html">Home</a></li>
<li><a href="our_cupcakes.html">Our Cupcakes</a>
<ul>
<li><a href="birthday_cupcakes.html">Birthday Cupcakes</a></li>
<li><a href="new_baby_cupcakes.html">New Baby Cupcakes</a></li>
<li><a href="anniversary_cupcakes.html">Anniversary Cupcakes</a></li>
<li><a href="just_because_cupcakes.html">Just Because Cupcakes</a></li>
<li><a href="seasonal_cupcakes.html">Seasonal Cupcakes</a></li>
<li><a href="special_order_cupcakes.html">Special Order Cupcakes</a></li>
</ul>
</li>
<li><a href="flavours_and_colours.html">Flavours &amp; Colours</a></li>
<li><a href="faqs.html">FAQs</a>
<ul>
<li><a href="faqs.html">General questions</a></li>
<li><a href="faqs.html#ingredients">Ingredients</a></li>
<li><a href="faqs.html#delivery">Delivery &amp; Pick-up</a></li>
<li><a href="faqs.html#about">About us</a></li>
</ul>
</li>
</li>
<li><a href="order_cupcakes.php">Order Cupcakes</a> </li>
</ul>         

Dropmenu.js does my drop menu work and there’s a separate CSS for that, but I can’t see this would stop me from applying the .selected class to a nav item using JQuery, but I could be wrong.

Is anyone able to give me some hints on where I may be going wrong please? Eventually the code will sit on my wife’s home baking website http://cupcakes.ladybirdbakery.co.uk

Many thanks.

Ant

Answer 1

EDIT 2:
I didn’t realize you were trying to highlight the menu option for the page the user was on. That’s a totally different thing, and what you’re doing now is the wrong way to approach i, and here’s why: When a user clicks on a link, the class selected is added to the <li>. But then a totally new page is loaded. The changes JavaScript (and jQuery) make to a webpage do not persist for future pages. So that means when the new page is loaded, none of the <li>s have the selected class, until someone clicks on one (but then another page will load immediately, so they will not see the li highlight).
As far as how to implement this, I would recommend just manually adding the class selected to the correct li in each HTML file. But if you really want to use JavaScript, here’s the code:

$(function(){ // this is a shortcut for $(document).ready(function(){
  var filename = location.pathname.substring(location.pathname.lastIndexOf('/')+1)
  $('a[href="' + (filename ? filename : 'index.html') + '"]').parent('li').addClass('selected')
})

So first we create a variable filename and set it to the filename of the current page. Then we find all <a>s whose href attribute is equal to the filename, get their parent <li> elements, and add the class selected.
I hope this helps. If you have more problems or questions, let me know. Thanks!