[英]Onclick Event with Css
我试图在CSS的导航栏中实现onClick事件。 到目前为止,这是我的代码:
<div id="nav">
<ul>
<li class = "cat1">
<a href="#">Jahr</a>
</li>
<li class = "cat2">
<a href="#">Monat</a>
<ul>
<li><a href="#">Januar</a></li>
<li><a href="#">Februar</a></li>
<li><a href="#">März</a></li>
<li><a href="#">April</a></li>
<li><a href="#">Mai</a></li>
<li><a href="#">Juni</a></li>
<li><a href="#">Juli</a></li>
<li><a href="#">August</a></li>
<li><a href="#">September</a></li>
<li><a href="#">Oktober</a></li>
<li><a href="#">November</a></li>
<li><a href="#">Dezember</a></li>
</ul>
</li>
<li class = "catKultur">
<a href="#">Kunst & Kultur</a>
</li>
<li class = "catParty">
<a href="#">Party& Nachtleben</a>
</li>
<li class = "catSport">
<a href="#">Sport</a>
</li>
<li class = "catKonzert">
<a href="#">Konzert</a>
</li>
<li class = "catEssen">
<a href="#">Essen & Trinken</a>
</li>
</ul>
</div>
但是问题是,我想在单击按钮后将按钮保持为红色,而在再次单击后将其切换为灰色。 它可以通过CSS实现,我可以检查按钮状态以过滤maincontent吗?
问候
可悲的是,CSS没有onclick函数,您可能希望CSS最好的是:active,但是一旦释放鼠标按钮,一切都会恢复到原始状态。 这是:active在行动的例子
<div id="button">
</div>
#button{
width:150px;
height:50px;
margin:50px auto;
background:#555;
}
#button:active{
background:#f00;
}
您可以使用jquery来做到这一点:
$('#nav li').on('click', function() { $(this).toggleClass("active"); $(this).siblings().removeClass("active"); });
添加以下CSS:-
#nav li.active{ background: red !important; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.