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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Links

Status
Not open for further replies.
2creative

2creative

Technical User
Jan 19, 2009
14
US
Hi all!


I am creating 4 links. I wanted to make the link text change to a different color when a user clicked on it. However, when the user click on a different link, the link that they previously clicked on should NOT have the visited color anymore and goes back to the color like the rest of the other links. Are you lost yet??? I am!!!

Alright, I think what I am trying to say is that, every time a user click on a link, I only wanted clicked on link to show a visited color. When they are not looking at that link, it should go back to the original color. Right now, my css coding is NOT working crrectly. All the links should start out in WHITE. When you mouseover the link, it should turn to BLACK. When the user clicked on it, the link should stay BLACK. When the user click on a different link, the original link should go back to WHITE again and NOT stay BLACK. There's should only be only one BLACK link shown. Right now, it is showing all BLACK links when you visited the links.

Here is the CSS:



Code: 
}
a{
color: #fff;
text-decoration: none;
}
a:hover{
color: #000000;
}



a:visited{
color: #000000;
}



a:selected{
color: #000000;
}

a:selected{ 
color: #000000;
}

a:selected:hover{
color: #000000;
}


The link should only be in BLACK when you click on it. No matter if you click on all the links, there should ALWAYS one link in BLACK.


Thanks for any advice!!!



 
Sort by date Sort by votes
Many moons ago, this sort of trickery was done by creating images,each image of a given color. You also needed to create a page per possible combination so that the proper theme is loaded.

Today, however, we have fire, the wheel, electricity and yes, the internet. With the internet came something called HTML which evolved to DHTML and later to XHTML. No long after that we started to see things like Server Side Scripting, CGI, XML, XSL, and a whole lot more (all this thanks to Al Gore!)

If you are not prepared to use server side anything, you will need to use JS + Cookies - You'll write the cookies as the links are clicked, load cookies as page is loaded and set properties on your objects according to your cookies' settings.

Personally, I would use something like PHP, ASP, .NET, or Perl (to mention just a few).

Good luck!


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Upvote 0 Downvote
No JS is necessary, and using server-side code is huge overkill. You just need to think about your CSS.

Code: 
<html>
<head>
	<style type="text/css">
		body {
			background-color: green;
		}

		a, a:link {
			color: white;
		}

		a:visited {
			color: white;
		}

		a:hover {
			color: black;
		}

		a:focus, a:active {
			color: black;
		}
	</style>
</head>

<body>
	<a href="[URL unfurl="true"]http://www.google.co.uk/">Google</a>[/URL]
	<br />
	<a href="[URL unfurl="true"]http://www.yahoo.co.uk/">Yahoo</a>[/URL]
	<br />
	<a href="[URL unfurl="true"]http://www.msn.co.uk/">MSN</a>[/URL]
	<br />
</body>
</html>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
I use the acronym LoVe HAte to remind me of the sequence Link, Visited, Hover, Active

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
Upvote 0 Downvote
Dan, I don't think that will work as I think the OP is after a sort of 'sticky' nav whereby the nav link to the current page is marked in some way (in this case by being black).

If your pages have their own snippet of nav code (rather than the same snippet from an include) then it's very simple to add a class to change the style of the 'activated' link. Just be aware of specificity and "the cascade".

Otherwise, if you're like me and like to include a common block of code into all your pages, you will need to resort to Javascript or Server side scripting.

Generally I do this with Javascript and normally using jQuery (since it's very simple to do).

I give each of my pages body tag an ID (or class if you prefer) and then each of my nav links a similiar id.
For instance:

Page id = "home"
Nav link = "nav_home"

Page id = "contact"
Nav link = "nav_contact"

etc.

Then, using a bit of pattern matching I grab the id/class of the page and use it to set the style of an element named "nav_<page-id>"

If I'm using jQuery then it's as simple as running this line on each page

Code: 
$('#nav_'+$('body').attr('id')).addClass('active');

If you're unfamiliar with jQuery then the above is saying...
Grab the element with the id of "nav_(body id)" and apply the css class named "active" to it.


There are all manner of variations on this method. For instance you could dynamically change the url of an image being used if you wished. If I'm using this I might create images named "homenav.gif" and homenav_over.gif" - then, again using a bit of pattern matching just change the url of the image being loaded based on the page's body id.


Hope that makes sense :)

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
If you're already giving each page's <body> and each navigation <a> a unique id, you could just use CSS instead of scripting:
Code: 
body#home a#nav_home,
body#contact a#nav_contact {
   color: red;  /* or whatever */
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Actually, yes, of course you could :) That is much simpler.

In my defence :) My example was from a site running a CMS where you won't know in advance what the page id's are and another case where it was swapping images around.



Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
I guess that the good old Do Not Repeat Yourself does not apply for things like this.

Since all I do is Server Side Scripting, I keep on thinking that even a plain old HTML page needs to have some sort of scripting, hence, my suggestion to use JS + Cookies (not a bad idea though).

That being said, I agree that if OP is already using multiple pages, OP could simply have CSS blocks for each page and change the objects properties accordingly - messy, but could get the job done.

So, if you were to use the OP code, all you have to do is add an entry like:
Code: 
a#livelink { color: #000; }
and your HTML should have a anchor tag with an ID like
Code: 
<a id="livelink" href="#">YOU ARE HERE!</a>
[/a]





--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Upvote 0 Downvote
Dan......YOU GOT IT!!!


I tried your CSS and it is the way I wanted.

This is the CSS code you gave me:


Code: 
<style type="text/css">
        body {
            background-color: green;
        }

        a, a:link {
            color: white;
        }

        a:visited {
            color: white;
        }

        a:hover {
            color: black;
        }

        a:focus, a:active {
            color: black;
        }
    </style>



I tested out on IE7, Firefox, Safari and it gave me no problem.

Actually, I glad your CSS code work because I did really want to try all the other codes from everyone else's. I didn't want to pull an all nighter trying to figure out the rest of the other codes. ha ha ha

Thanks everyone!!!!!!!!!!!!
 
Upvote 0 Downvote
Dan's code, although great, will only make the link black when you click it and it has focus. When you click away it will revert to the link or visited state even if you are on the same page.

Is this really what you wanted?

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
This is not a big deal but everything seems to be working correctly. When I click on the REFRESH button on the browser, it goes back to the FIRST tab but the tab 3 still highlighted in BLACK.

It's a little goofy because the tab 3 is highlighted within box below with all the text content showing that it went back to the FIRST tab. Anyone know what it would do that when you click on the REFRESH button on the browser?

Thanks!!
 
Upvote 0 Downvote
Foamcow, I see what you are talking about. I was playing around all the links and I noticed if you click around the text link, it will also take you to the other tab. The funny thing is that the previous link is still highlighted in BLACK.

So back to the drawing board. ha ha ha

 
Upvote 0 Downvote
So back to the drawing board. ha ha ha
Click to expand...

Not really. Two different ways to achieve what I think you want have been given in this thread.

Can you show us the page/code involved?

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
Here is the HTML code:


Code: 
	<h3 class="tab" title=""><div class="tabtxt"><a href="#" onclick="return false">Integrity</a></div></h3>
	<div class="tab"><h3 class="tabtxt" title=""><a href="#" onclick="return false">Solutions</a></h3></div>
	<div class="tab"><h3 class="tabtxt" title=""><a href="#" onclick="return false">Diversification</a></h3></div>
	<div class="tab"><h3 class="tabtxt" title=""><a href="#" onclick="return false">Simplicity</a></h3></div>




Here is the external CSS:

Code: 
body{
color: #333;
font-size: 11px;
font-family: arial;

}
        a, a:link {
            color: white;
			text-decoration: none;
        }

        a:visited {
            color: white;
        }

        a:hover {
            color: black;
			
        }

        a:focus, a:active {
            color: black;
		
        }

.list {

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: normal;
	display:block;
	padding-top:15px;
	padding-left:11px;

	
}


.wrapper7{
width: 525px;
top:320px;
left:16px;
position:absolute;

}
.box{
background: #fff;
padding-left:18px;
padding-right:25px;


}

.boxholder{
clear: both;
padding: 1px;
background: #CCCCCC;
width:518px;

}

.tab{
float: left;
height: 34px;
width: 127px;
margin: 0 4px 0 0;
text-align: center;
background:  url(images/shadeactive.gif) no-repeat;
}

.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 9px 0 0 0;

}



Let me know if you need additional information. Thanks!

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

peterd51
  • Locked
  • Question
HTML External Links Fail
Replies
15
Views
195
peterd51
peterd51
geneg28
  • Locked
  • Question
NEED HELP WITH CREATING LINKS
Replies
6
Views
145
geneg28
geneg28
pendle666
  • Locked
  • Question
Excel spreadsheet data into a web page including links
Replies
3
Views
94
pendle666
pendle666
c0deM0nK424
  • Locked
  • Question
Making bootstrap navigation bar links 'collapse' too soon ?
Replies
1
Views
71
vacunita
vacunita
peterpann
  • Locked
  • Question
hide some links from search engines
Replies
3
Views
99
peterpann
peterpann

Part and Inventory Search

Sponsor

Back
Top