Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

highlight anchor?



10:04 pm on Apr 26, 2008 (gmt 0)

10+ Year Member

I have a webpage with several html anchors. The anchor part works ok, but when I click on the links, I only goto to the part of the page with all the anchors (all anchors are gathered low in the page) and I wanted to know if there is any way of highlighting the specific anchor that the user has clicked on.
Thank you.


1:43 am on Apr 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Are you talking about anchors within the page, a.k.a. bookmarks? If that is the case, each bookmark should have its own unique name, e.g.

<a name="bookmark_1">Bookmark One</a>
<a name="bookmark_2">Bookmark Two</a>

You links would read <a href="bookmark_1">Go To Bookmark One</a> or if you are coming from a different page, the anchor would be <a href="widgets.com#Bookmark_1">Go To...</a>.

If your bookmarks are in the same line, there is no way ti really distinguish the target bookmark. If they are above one another, each bookmark should align with the top of the window when selected.



7:38 am on Apr 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

If you mean you want to highlight the target selected such as giving it a different background color I've seen this done on phpbb's site in their rules section. There's a piece of javascript they use, it will highlight whatever rule you click on.


5:40 pm on Apr 28, 2008 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

I put together a very quick (rough) example, which uses the Yahoo UI Library for some of its Event and Dom utility capabilities. It's likely that this could be really cleaned up, but I just wanted to throw something together to get you started. It requires you to give the links that you'll click on a class of 'gotolink', and your named anchors must have an id value that matches the name value.

<style type="text/css">
div {
padding-top: 900px;
.activeLink {
background-color: #ffff00;
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<a href="#link1" class="gotolink">Go to Link 1</a>
<a href="#link2" class="gotolink">Go to Link 2</a>
<a href="#link3" class="gotolink">Go to Link 3</a>
<a name="link1" id="link1">Link 1</a>
<a name="link2" id="link2">Link 2</a>
<a name="link3" id="link3">Link 3</a>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var i, target;
var gotoLinks = YAHOO.util.Dom.getElementsByClassName('gotolink', 'a');
var targetLinks = [];
// Build the list of target links first (so we can reset them)
for (i = 0; i < gotoLinks.length; i++) {
target = document.getElementById(gotoLinks[i].href.split('#')[1]);
targetLinks[targetLinks.length] = target;
// targetLinks now contains all of the links that we link to
for (i = 0; i < gotoLinks.length; i++) {
YAHOO.util.Event.on(gotoLinks[i], 'click', function (e, t) {
var j;
var aname = this.href.split('#')[1];
for (j = 0; j < t.length; j++) {
YAHOO.util.Dom.replaceClass(t[j], 'activeLink', 'dormantLink');
YAHOO.util.Dom.replaceClass(aname, 'dormantLink', 'activeLink');
}, targetLinks);


6:58 pm on Apr 30, 2008 (gmt 0)

5+ Year Member

You can get that effect through the CSS pseudo class :target. suckerfish [htmldog.com] has a way of enabling support in IE

Featured Threads

Hot Threads This Week

Hot Threads This Month