Change link anchor text on load but restore on click

Lets say I have a bunch of links with the same class but different anchor text like

<a class="hey" href="sitepoint.com">sitepoint</a>
<a class="hey" href="google.com">google</a>

When the page loads I want the anchor text of ea开发者_高级运维ch link to display the same text of my choosing. However, when the visitor clicks a link the anchor changes back to the orignial. It would be best if all links could be changed back their original if any link is clicked but this isn't that important.

Any help is apprecaited.

$('a.hey').each(function(){
    $(this).data('oldHref', $(this).attr(href));
    $(this).attr('href', 'CUSTOM TEXT HERE');
    $(this).click(function(){
        this.attr('href', this.data('oldHref');
        return false; //prevent default action, I assume
    })
})

If you meant the innerHTML:

$('a.hey').each(function(){
    $(this).data('oldInner', this.innerHTML);
    this.innerHTML = 'CUSTOM TEXT HERE';
    $(this).click(function(){
        this[0].innerHTML = this.data('oldInner');
        return false; //prevent default action, I assume
    })
})

I don't think this changing the text will make much difference since you will be redirecting the users to some other location when they clicks on the link.

Also it will be confusing for the user.

I don't know if I understood you correctly, but would you tell me if you use any JavaScript library such as Prototype and jQuery?

If your links are classic link, it doesn't make any sense if you can change the anchor text after user click because as soon as he/she clicks the link he/she will be redirected to another page, but if your links are Ajax links you can do that. Do you want all links show the same text before user clicks them???