OnClick样式更改

OnClick style change

本文关键字：样式 OnClick      更新时间：2023-09-26

当我点击链接时，我试图在链接上保持悬停风格的状态，有点像选项卡效果。它似乎不起作用，希望有人能帮我。

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>

您可以通过声明不同的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>

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

相关文章：