how to set styles in selected menu item.

Question

I putted this code in master page to display menus in all this pages. Home About Us Disclaimer Services Contact Us And used css to style this menus like ul lia:hover a:visited…… Now how I can add difference appearance in particular link if that page is currently visiting. E.g. If I click the About Us link then it navigate to AboutUs.aspx page and then I want to set background image in that link and background:none in other links.

Deepak Verma · Answer

Hi Dinesh Refer to this code: Master Page: head runat =server> title > title > link href =StyleSheet.css rel =stylesheet type =text/css /> script src =jquery-1.6.2.js type =text/javascript> script > script type =text/javascript> $(document).ready( function () { $( .menuLinks ).click( function () { $( .menuLinks ).removeClass( selected ); }); }); script > asp : ContentPlaceHolder ID =head runat =server> asp : ContentPlaceHolder > head > body > form id =form1 runat =server> div > ul class =menu> li > a id =link1 class =menuLinks href =Page1.aspx runat =server> Link 1 a > li > li > a id =link2 class =menuLinks href =Page2.aspx runat =server> Link 2 a > li > li > a id =link3 class =menuLinks href =Page3.aspx runat =server> Link 3 a > li > ul > asp : ContentPlaceHolder ID =ContentPlaceHolder1 runat =server> asp : ContentPlaceHolder > div > form > body > StyleSheet.css : ul.menu li { float : left ; list-style : none ; } ul.menu li a { text-decoration : none ; font-family : Tahoma ; font-size : 20px ; margin : 0px 10px 0px 0px ; padding : 3px ; background-color : Black ; color : White ; border-radius : 5px ; } ul.menu li a:hover { background-color : Blue !important ; } ul.menu li a.selected { background-color : Blue !important ; } Page1.aspx.cs : protected void Page_Load( object sender EventArgs e) { (( HtmlAnchor ) this .Page.Master.FindControl( link1 )).Attributes.Add( class  selected ); } Page2.aspx.cs : protected void Page_Load( object sender EventArgs e) { (( HtmlAnchor ) this .Page.Master.FindControl( link2 )).Attributes.Add( class  selected ); } Page3.aspx.cs : protected void Page_Load( object sender EventArgs e) { (( HtmlAnchor ) this .Page.Master.FindControl( link3 )).Attributes.Add( class  selected ); }

Dinesh Ambaliya · Answer

This will work. Thank you.