Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Trouble with anchor colors

Status
Not open for further replies.
vza

vza

Programmer
Aug 1, 2003
179
US
div.navMenu a:active {
color: #000000;
background-color: #FFCC00;
background: #FFCC00;
}

I currently have created a <div> tag within my jsp page which contains numerous links to Navigate around my site. I have inserted the following style definition in my CSS style sheet to change the color of an anchor within the <div> tag to this color once it has it is clicked. Once it is clicked however the color changes for about a second, and returns back to is original state after the page refreshes. I think this is due to the fact that the anchor no longer is active or has focus so it returns to is original style. Is there a way I can get the color for an anchor to remain the same UNTIL another anchoir within the <div> tag is clicked (it then becomes the one to change color)??

Any help would be greatly apprecited.

-vza
 
Sort by date Sort by votes
To answer your question... no, not without using javascript to handle which link is to be coloured (even through refreshes).

Your CSS above is redundant... you don't need to specify background like that if you have already specified the background-color.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
i agree with Jeff. your only other option is the :visited pseudo-class, which will style anchors you've already visited differently. they will remain that style, however, until you clear your cache or the page is updated.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Thanks for the responses!

I am not too familiar with javascript...what would be the best way to do implement something like this?

-vza
 
Upvote 0 Downvote
I am not too familiar with javascript...what would be the best way to do implement something like this?
Click to expand...
Employ a javascript developer for a short term contract to complete the task. It's not trivial. I would suggest you look for someone with the following core skills:

- javascript cookie (set/get)
- javascript DOM parsing (and manipulation)

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
The [tt]:active[/tt] pseudo class applies to a link that you're clicking on, right now. It doesn't define the appearance of links which point to the currently displayed page. A pseudo-class that did that would be really useful, which is probably why the W3C didn't invent one! Frankly, [tt]:active[/tt] is pretty useless in most cases.

So if you want to style the currently selected menu item, you've got to do it some other way. You can follow Jeff's advice and use Javascript, but there are other ways too.

Since you're building the menu in a jsp page, why not code the jsp to include a class into the current page's link:
Code: 
<div class="navMenu">
<a href="here.htm" [red]class="current"[/red]>Here</a>
<a href="there.htm">There</a>
...
</div>
Then you can apply styles to [tt]div.navMenu a.current[/tt].

Alternatively, you can give each link a class, and give every page a unique id, like this:
Code: 
<body id="here">
...
<div class="navMenu">
<a href="here.htm" class="here">Here</a>
<a href="there.htm" class="there">There</a>
...
</div>
...
</copy>
Then you can style it like this:
Code: 
#here a.here,
#there a.there {
   color: #000;
   background: #FC0;
}
Those are probably the easiest ways to do it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
To take Chris' 1st method one step further, I typically de-activate the link on the current page pointing back to itself (sort of redundant to link to the current page anyway) and style the "current" class differently from the rest of the links.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
ChrisHunt...
I appreciate your response, I will give these methods a try and see if I can work it out...

-vza
 
Upvote 0 Downvote
How is it determined when the "current" link is chosen?

-vza
 
Upvote 0 Downvote
How is it determined when the "current" link is chosen?
Click to expand...
You'll have to do that dynamically in your jsp somehow. I don't speak jsp, so I can't give you any code, but what I do is create an array of menu options and the urls they point to. Then I can build the HTML for the menu like this (pseudocode):

for each item in the menu-array
if array-item-url = current page then
print a menu item including class="current"
else
print a plain menu item
end if
end loop

Doing it that way makes it easy to maintain - you can tweak your menu just by adjusting the contents of the array.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
718
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
132
CoolBreeze007
CoolBreeze007
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
238
LyndonOHRC
LyndonOHRC
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
195
caykamanj1966
caykamanj1966

Part and Inventory Search

Sponsor

Back
Top