Question

im trying to make an active state with jquery…

heres my code that isn’t working..

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('ul#menuHov a[href$="' + window.location.pathname + '"]').addClass("menuHov"); 
});
</script>

and the menu…

<ul id="menuHov">
    <li style="width:128px"><a href="" ><span>SHOP<br/>SHOP</span></a></li>
    <li style="width:193px"><a href="/collections" ><span>COLLECTIONS<br/>COLLECTIONS</span></a></li>
    <li style="width:147px"><a href="/about-local-celebrity"><span>ABOUT<br/>ABOUT</span></a></li>
    <li style="width:186px"><a href="/stockists" ><span>STOCKISTS<br/>STOCKISTS</span></a></li>
    <li style="width:146px"><a href="/press" ><span>PRESS<br/>PRESS</span></a></li>
    <li style="width:128px"><a href="/category/blog" ><span>BLOG<br/>BLOG</span></a></li>
    <li style="width:70px"><a href="/contact" ><span>CONTACT<br/>CONTACT</span></a></li>
</ul>

and the class i want as active state…

.menuHov {color:#fae349}

Answer 1

it works fine for me:

http://jsfiddle.net/maniator/JYc8g/ (click run if u don’t see it work right away)

make sure the path is correct, use the firebug or chrome console to check what window.location.pathname is on the page you want

UPDATE

seems to be a css issue change line 95 of user.css to:

#headerMenu ul li a:hover, a.menuHov {
   color: #00AEEF !important;
}