OnClick样式更改

我试图在我的链接上保留悬停样式状态，当我点击它们时，有点像标签效果。它似乎没有工作，希望有人能帮助我。OnClick样式更改

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>

来源

2013-07-15 Bliss L. Ng

叫我疯了，但是你的'.nav a：hover'css和'.nav2 a'css看起来完全相同 – Katstevens

是的，我实际上试图让我的链接与它在悬停时具有相同的效果。 –

我这么认为 - 我只是将它们合并成相同的规则，尽管如此，至少如果你改变它，它将适用于两者（只是逗号分开两个选择器在{之前）。什么浏览器在做不同的风格？ Chrome似乎仍然采用相同的风格：悬停和点击 – Katstevens

你可能只是做一些事情，宣布了不同风格的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>

而且不要忘记从外部脚本中使用标签来避免。

来源

2013-07-31 00:55:42 Time

OnClick样式更改

回答

相关问题