Reputation: 73
Need to add an active class to my parent element if a user clicks on the child element in a list. The below script is used if a user clicks on the parent link.
Javascript:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var str=location.href.toLowerCase();
$('.body-content-container-pascrc ul#pascrc-sitenav li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$(this).attr("class","active"); //hightlight parent tab
}
});
});
</script>
HTML:
<ul id="navigation">
<li> <a href="#" id="agenda-link">Agenda</a>
<ul id="agenda" class="megamenu">
<li><a href="#">June 8, 2011</a>
</li>
<li><a href="#">June 9, 2011</a>
</li>
<li><a href="#">June 10, 2011</a>
</li>
</ul>
</li>
</ul>
Can someone please assist?
Upvotes: 1
Views: 2562
Reputation: 25188
$(".body-content-container-pascrc ul#pascrc-sitenav li a").click(function() {
$(this).parent().addClass("active");
});
jsfiddle: http://jsfiddle.net/switz/csgej/
Upvotes: 1