Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET CSS
I putted this code in master page to display menus in all this pages.
<ul>
           <li><a id="lnkHome" href="Default.aspx">Home</a> </li>
           <li><a id="lnkAboutUs" href="AboutUs.aspx">About Us</a> </li>
           <li><a id="lnkDisclaimer" href="Disclaimer.aspx">Disclaimer</a> </li>
           <li><a id="lnkServices" href="Services.aspx">Services</a> </li>
           <li><a id="lnkContactUs" href="ContactUs.aspx">Contact Us</a> </li>
</ul>
And used css to style this menus like ul li,a:hover, a:visited……
Now how I can add difference appearance in particular <a> link if that page is currently visiting. E.g. If I click the About Us <a> 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.
Posted 29-Jul-12 4:23am
Edited 29-Jul-12 4:25am
Wes Aday94.3K
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You can do it by "a:active", but I have not tried :p.
When I was searching in google, I found one post - CSS, menu:active not working[^], where it is stated that "a:active" is not working, but it has an accepted answer.
 
You can see, the person who has given the answer commented again below the answer about how to achieve it if "a:active" is not working.
So, follow his suggestions.
Hope it helps.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Use the id. Here is a sample.
 
in aspx file
<div id="menuInside">
	<ul id="nav-mini">
		<li><asp:linkbutton id="LinkButton1" runat="server"></asp:linkbutton></li>
		<li><asp:linkbutton id="LinkButton2" runat="server"></asp:linkbutton></li>
		<li><asp:linkbutton id="LinkButton3" runat="server"></asp:linkbutton></li>
		<li><asp:linkbutton id="LinkButton4" runat="server"></asp:linkbutton></li>
		</ul>
</div>
 
in css file.
#menuInside a#LinkButton1{
...
}
#menuInside a#LinkButton1:hover{
...
}
 
#menuInside a#LinkButton2{
...
}
#menuInside a#LinkButton2:hover{
...
}
hope this helps.
  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

you can try like this
<ul>
           <li><a class="liselected" id="lnkHome" href="Default.aspx">Home</a> </li>
           <li><a id="lnkAboutUs" href="AboutUs.aspx">About Us</a> </li>
           <li><a id="lnkDisclaimer" href="Disclaimer.aspx">Disclaimer</a> </li>
           <li><a id="lnkServices" href="Services.aspx">Services</a> </li>
           <li><a id="lnkContactUs" href="ContactUs.aspx">Contact Us</a> </li>
</ul
>
 

.liselected
{
background-color:#333;
.......
.......
}
  Permalink  
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web04 | 2.8.1411022.1 | Last Updated 30 Jul 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100