dynamic html javascript menu active selection

Question

I found this script and I understand why it won't work with my menu as it is but cannot figure out how to get it to work

<script>
$(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#menu li a").removeClass('current');
        $("ul#menu li a[href^='"+currentPHP+"']").addClass('current');
  });
</script>

<nav>
<ul class="menu">
    <li class="current"><a href="index.php">Home</a></li>
    <li><a href="gallery.php">Gallery</a></li>
    <li><a href="location.php">Location</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="contact.php">Contact</a></li>
</ul>

Any help would be appreciated. Thanks.

Biketire · Accepted Answer · 2013-12-17 14:19:50Z

1

My solution

$(document).ready(function(){
  var currentPHP = document.location.pathname.replace(/.+\//i, "")
  $("ul.menu li a[href^='"+currentPHP+"']").parent().addClass("current");
});

answered Dec 17, 2013 at 14:19

Biketire

2,0872 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jazZRo · Accepted Answer · 2013-12-17 14:06:59Z

1

You are selecting the ul by it's id: ul#menu. Select it by the class name: ul.menu. You are also adding and removing the current class from a and not li. Try this:

$(document).ready(function(){
    var i = document.location.href.lastIndexOf("/");
    var currentPHP = document.location.href.substr(i+1);
    $("ul.menu li")
       .removeClass('current')
       .has("a[href^='"+currentPHP+"']")
       .addClass('current');
});

edited Dec 17, 2013 at 14:06

answered Dec 17, 2013 at 14:01

jazZRo

1,6081 gold badge16 silver badges20 bronze badges

3 Comments

Biketire Over a year ago

Considering that the first li always has the current class ... hmm nice.

jazZRo Over a year ago

@Gerard: It removes the current class from all li's and than narrows the selection down to the one that has an a tag with the desired href, which than gets the current class.

Biketire Over a year ago

I understand. Didn't know about the existence of the has function in jQuery.

drquicksilver · Accepted Answer · 2013-12-17 14:17:28Z

0

Looks like you want the class to be on the <li> not the <a> elements? You're adding it to the anchors themselves. Try:

$("ul.menu li").removeClass('current');
$("ul.menu li a[href^='"+currentPHP+"']").parent().addClass('current');

(You were also selecting by id not class, as jazZRo pointed out - edited to use class)

edited Dec 17, 2013 at 14:17

answered Dec 17, 2013 at 14:00

drquicksilver

1,6459 silver badges12 bronze badges

Collectives™ on Stack Overflow

dynamic html javascript menu active selection

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related