Javascript

Hi.
In my App i have Tabs like below

[Manage Contacts] [Roles] [users] [Contact Us]

<a href="#" id="d1" onclick= "tp_select();">Manage Accounts</a>
<a href="#" id="d2" onclick= "tp_select();">Roles</a>
<a href="#" id="d3">onclick= "tp_select();">Users</a>
<a href="#" id="d4">onclick= "tp_select();">Contact Us</a>

[On click Event]if user clicks on Roles tab means the Style class
"tp_select" has to be called for Roles tab.
and if user clicks on Contact Us tab means the Style class "tp_select"
has to be called for Contact Us tab.
#-----i ve done java script function----#
function tp_select() {
    $('d1').addClassName('tp_select')

}

maybe like so?

<a href="#" id="d1" class='tab_link' onclick=
"tp_select(this);">Manage Accounts</a>
<a href="#" id="d2" class='tab_link' onclick=
"tp_select(this);">Roles</a>
<a href="#" id="d3" class='tab_link' onclick=
"tp_select(this);">Users</a>
<a href="#" id="d4" class='tab_link' onclick=
"tp_select(this);">Contact Us</a>

function tp_select(a) {
  // clear out the others
  $$('.tab_link').each(function(el){
    el.removeClassName('tp_select')
  })
  // add back in for this one
  $(a.id).addClassName('tp_select')
}