SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2003
    Location
    uk
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to Link to the same page and change the color

    I have an alphabetic list in order and each alphabet leads to a section in the same page. I know how to link it using the anchor, but i want the color of the section to change once the link is clicked. e.g. if user clicks on alphabet z on the top of the page, the page will jump to the z section, but i also want that section to be highlighted in a diferent color or at least the first letter of the section to be shown in red.

    <A HREF="#A">A</A>
    <A NAME="A">A</A> (I want the letter A to be highlighted in red when the A link is clicked)



    any advise how to achieve this?

    thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Anchors can also be (and should be) identified using an identifier attribute. That helps to prevent vast amounts of anchor tags from littering the landscape.

    Compare:

    Code html4strict:
    <a href="#A">A</a>
    <h3><a name="A">A</A></h3>
     
    <a href="#B">B</a>
    <h3 id="B">B</h3>

    Here's some code that checks regularly for any change to the hash and sets a style to the appropriate element.

    Code javascript:
    function setActiveIdentifier() {
    	var id = location.hash.slice(1);
    	var el = '';
    	// sanity checks	
    	if (!id) {
    		return;
    	}
    	if (!window.prevIdentifier) {
    		window.prevIdentifier = '';
    	}
    	// identifier can be either a named element or an id
    	el = document.getElementById(id);
    	if (!el) {
    		el = document.getElementsByName(id)[0];
    	}
    	// remove style from previous identifier
    	if (window.prevIdentifier !== el) {
    		window.prevIdentifier.className = '';
    	}
    	// set style on active identifier
    	el.className = 'activeIdentifier';
    	window.prevIdentifier = el;
    }
    setInterval(setActiveIdentifier, 1000);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •