SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hyperlink changing href and name after clicked.

    Can this be done? For instance.....

    Frames Example

    The page already loads with the "pictures.html" being loaded so there is no real need for the link to it on the left. What does need to be there is the "patterns.html" because it doesn't come up with it. In a simple example like this with only 2 pages and 1 already being displayed automatically, there is only need for 1 link. Can it be done so that when the page loads only Patterns is there as a link and when clicked on, it changes to Pictures because Patterns is already displayed.

    I know it may sound a bit strange, but I would like to do that to my main page...

    My site.

    So that the link "patterns" is at the bottom since the pictures are loaded automatically by default, but when they click patterns, the hyperlink changes to pictures. Just so I don't have to put both at the bottom.

    Thank you for your time.

    -Cesar

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An easy way to do this could be:

    Add an event listener "click" to each of the tags. When clicked, set clicked link to display=none and the other link to display=block

    The code:

    CSS:
    Code:
    #patLink{
    display:none;
    }
    #picLink{
    display:block;
    }
    ul{
    /*if you want to get rid of the dots in the list*/
    margin:0;
    padding:0;
    }
    HTML:
    HTML Code:
    <ul>
    <li><a href="/patterns.html" id="patLink">Patterns</a></li>
    <li><a href="/pictures.html" id="picLink">Pictures</a></li>
    </ul>
    JS:
    Code:
    function patLinkCl(){
    var ePat=document.getElementById("patLink");
    ePat.style.display="none";
    var ePic=document.getElementById("picLink");
    ePic.style.display="block";
    }
    function picLinkCl(){
    var ePat=document.getElementById("patLink");
    ePat.style.display="block";
    var ePic=document.getElementById("picLink");
    ePic.style.display="none";
    }
    xAddEventListener("click",picLinkCl,0);
    xAddEventListener("click",patLinkCl,0);
    (I use x_library from www.cross-browser.com to get around a lot of common cross-browser problems... Do as you use to do)

    But if you're planning to have more links in the future than the two you've got now, you maybe should style the clicked link different than the other link(s)


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
  •