javascript - OnClick 样式更改

Question

当我单击链接时，我试图保留链接上的悬停样式状态，有点像选项卡效果。似乎不起作用，希望有人能帮助我。

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 a {
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;
}

脚本:

$('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>

Answer 1

您可以通过声明不同的 onClick 样式来执行纯粹的 Javascript 操作。

var change = document.getElementById("Link Id");  //Define the link in a variable
change.onClick=function() {           //Activate the function when clicked
  change.style.fontFamily=("Asap");
  change.style.color=("#fff");
  change.style.fontSize=("12px");
  change.style.textDecoration=("none");         //Change the link attributes
  change.style.textTransform=("uppercase");
  change.style.letterSpacing=("1px");
  change.style.borderTop=("2px solid #fff");
  change.style.paddingTop= ("5px");
}

单击链接后，这应该将链接样式更改为悬停样式。只要确保为链接分配一个 ID 即可。确保您了解基本的 Javascript，例如 src 标签来调用它:

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

并且不要忘记避免在外部脚本中使用标签。