I have a navigation like this <div id="mainnav"> <ul id="nav"> <li class="sub"><a href="a.html"><b class=""><img src="img1-off.gif" alt="About GTx" /></b></a> <ul> <li><a href="a.html">nav1 </a></li> <li><a href="b.html">nav2 </a></li> <li><a href="c.html">nav3 </a></li> </ul> </li> <li class="sub"><a href="d.html"><b class=""><img src="img2-off.gif" alt="About GTx" /></b></a> <ul> <li><a href="d.html">nav4 </a></li> <li><a href="e.html">nav5 </a></li> <li><a href="f.html">nav6 </a></li> </ul> </li> </ul> </div>
I want the image get replaced with its on state version (img2-off.gif or img2-off.gif) if you are on it's page or it's child page. How to do this using jquery. Thanks!