[jQuery] Navigation with active state
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!