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樣式更改

回答

相關問題