unlimited33
New Member
I have an asp.net master page with a menu like this:\[code\] <menu id="menu"> <nav id="main_nav"> <ul id="menu-primary"> <li ><a href="http://stackoverflow.com/questions/12759269/">Home</a></li> <li><a href="http://stackoverflow.com/questions/12759269/staff.aspx">Staff</a></li> <li><a href="">Sales</a></li> <li><a href="">Support</a></li> <li><a href="">Administration</a></li> </ul> </nav> </menu>\[/code\]In master page, I want to change css for the menu item clicked. I have this jquery:\[code\]<script type="text/javascript"> jQuery(document).ready(function () { $('ul li a').each(function () { var text_splited = $(this).text().split(" "); $(this).html("<span>" + text_splited.shift() + " " + text_splited.join(" ") + "</span> "); }); // click on the first item on page load $('#menu-primary li').eq(0).click(); $('#menu-primary li').click(function (e) { alert('here'); // remove all active classes $('#menu-primary li').removeClass('current-menu-item'); // add active class to clicked item $(this).addClass('current-menu-item'); }); });</script> \[/code\]Here is the css\[code\]nav#main_nav ul li.current-menu-item a,nav#main_nav ul li a:hover {background: url("../images/menu_bg.png") no-repeat scroll 0 -149px transparent; border-bottom:1px solid #edf7ff}nav#main_nav ul li.current-menu-item a span,nav#main_nav ul li a:hover span{background: url("../images/menu_bg.png") no-repeat scroll 100% -118px transparent;}\[/code\]alert is shown but css is not applied to clicked item. Please suggest solution to this problem.