/    Sign up×
Community /Pin to ProfileBookmark

changing color of anchor tags when referenced by links

Copy linkTweet thisAlerts:
Feb 16.2004

i’m trying to create the effect that when some internal anchor tags are accessed by links on that page the font color for these anchor tags changes. However i want it so that there are multiple links each to different anchor tags so that when each anchor link is accessed only the relevant anchor tag will appear in a specifc color eg red, and will revert back to the original color of text when a new link is accessed causing its particular anchor tag to appear in a highlighted color.
example code would be great thanks.

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@PittimannFeb 16.2004 — Hi!

Example:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.high{
color:red;
}
.low{
color:black;
}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
function switchAnchorColor(address){
var whichA=document.getElementsByTagName('a');
for (var i =0;i < whichA.length;i++){
if (whichA[i].name==address){
whichA[i].className="high";
}
else{
whichA[i].className="low";
}
}
}
//-->
</script>
</head>
<body>
<a href="#internal1" onClick="switchAnchorColor('internal1')">goto internal1</a><br>
<a href="#internal2" onClick="switchAnchorColor('internal2')">goto internal2</a><br>
<a href="#internal3" onClick="switchAnchorColor('internal3')">goto internal3</a><br>
<a href="#internal4" onClick="switchAnchorColor('internal4')">goto internal4</a><br>
blahblah<br>
blahblah<br>
blahblah<br>
blahblah<br>
<a name="internal1">internal1</a><br>
blahblah<br>
blahblah<br>
blahblah<br>
blahblah<br>
<a name="internal2">internal2</a><br>
blahblah<br>
blahblah<br>
blahblah<br>
blahblah<br>
<a name="internal3">internal3</a><br>
blahblah<br>
blahblah<br>
blahblah<br>
blahblah<br>
<a name="internal4">internal4</a><br>
</body>
</html>
[/code]
Cheers - Pit
×

Success!

Help @aca01ajs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...