[jQuery] set class to active list item
I have the following code to fade menu items and highlight the active
one. I can't get the active one thing to work.
I've searched a lot but could only find ways to add a class to the
anchor, and I would like to add the class to the li (cause the anchor
already has a class)
Here is my code
<script src="_js/jquery-1.2.6.min.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('highlight')
.find('a')
.append('<span class="hover" />').each(function () {
var $span = $('> span.hover', this).css('opacity',
0);
$(this).hover(function () {
// on hover
$span.stop().fadeTo(100, 1);
}, function () {
// off hover
$span.stop().fadeTo(100, 0);
});
});
});
</script>
<script type="text/javascript">
$(document).ready( function(){
var path = location.pathname.substring(1);
$('a[@href$="' + path + '"]').parents("li").addClass('active');
});
</script>
<div id="navigatie">
<ul id="navigation">
<li class="highlight"><a href="beeldbank.html"
class="beeldbank"><span>beeldbank</span></a></li>
<li class="highlight"><a href="huisstijl.html"
class="huisstijl"><span>huisstijl</span></a></li>
<li class="highlight"><a href="index.html"
class="voorbeelden"><span>voorbeelden</span></a></li>
</ul>
</div>
Any ideas how to set (or change) the class to the li?