リンクをクリックしたときに、リンクのホバー スタイルの状態を保持しようとしています。これは、タブ効果のようなものです。誰かが私を助けてくれることを願って、それは機能していないようです。
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> </span>
<span class="btn2"><a href="#page-2" title="Neighbourhood">Neighbourhood</a>
</span>
<span class="btn3"><a href="#page-3" title="Media">Media</a> </span>
<span class="btn4"><a href="#page-4" title="Media">Developer</a> </span>
<span class="btn5"><a href="#page-5" title="Media">Contact</a> </span>
<br><br><br><br><br><br><br><br><br><br>
</div>