homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

highlight anchor?

5+ Year Member

Msg#: 3635912 posted 10:04 pm on Apr 26, 2008 (gmt 0)

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.



WebmasterWorld Senior Member 10+ Year Member

Msg#: 3635912 posted 1:43 am on Apr 27, 2008 (gmt 0)

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.



WebmasterWorld Senior Member 10+ Year Member

Msg#: 3635912 posted 7:38 am on Apr 27, 2008 (gmt 0)

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.


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

Msg#: 3635912 posted 5:40 pm on Apr 28, 2008 (gmt 0)

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);


5+ Year Member

Msg#: 3635912 posted 6:58 pm on Apr 30, 2008 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved