javascript - OnClick style change -

i'm trying retain hover style state on links when click on them, kind of tabbing effect. doesn't seem working, hoping can me it.

css:

.nav { position: absolute; z-index: 1000; font-family: asap; right: 100px; top: 70px;  }  .nav a, .nav a:active, .nav a:visited { font-family: 'asap', sans-serif; color: #fff; font-size: 12px; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; text-shadow: black 0.1em 0.1em 0.2em; }  .nav a:hover { font-family: asap; color: #fff; font-size: 12px; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; border-top: 2px solid #fff; padding-top: 5px; }  .nav2 { font-family: asap; color: #fff; font-size: 12px; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; border-top: 2px solid #fff; padding-top: 5px; } 

script:

$('div.nav > a').click(function(){ $(this).parent().removeclass('nav').addclass('nav2'); }); 

html:

<div class="nav" onclick="javascript:showlayer('myname')"> <span class="btn1"><a href="#page-1" title="design">design</a>&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="btn2"><a href="#page-2" title="neighbourhood">neighbourhood</a>  &nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="btn3"><a href="#page-3" title="media">media</a>&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="btn4"><a href="#page-4" title="media">developer</a>&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="btn5"><a href="#page-5" title="media">contact</a>&nbsp;&nbsp;&nbsp;&nbsp;</span> <br><br><br><br><br><br><br><br><br><br> </div> 

you purely javascript declaring different style onclick.

var change = document.getelementbyid("link id");  //define link in variable change.onclick=function() {           //activate function when clicked   change.style.fontfamily=("asap");   change.style.color=("#fff");   change.style.fontsize=("12px");   change.style.textdecoration=("none");         //change link attributes   change.style.texttransform=("uppercase");   change.style.letterspacing=("1px");   change.style.bordertop=("2px solid #fff");   change.style.paddingtop= ("5px"); } 

this should change link style hover style after click link. make sure assign link id. make sure know basic javascript src tag call it:

<script type = "text/javascript" src = "externaljavascript.js"></script>   

and don't forget refrain using tags in external script.