im trying to implement a onClick event to a navbar in css. This is my code so far:
<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>
but the problem is, that i want to stay the button in red color after i clicked on it and that its switching back in grey after I clicked it again. It this realizable with css and can I check the button state to filter the maincontent?
regards
Sadly CSS does not have an onclick function the best you could hope for in CSS is :active but once you release the mouse button everything goes back to its original state. This is an example of the :active in action
<div id="button">
</div>
#button{
width:150px;
height:50px;
margin:50px auto;
background:#555;
}
#button:active{
background:#f00;
}
You can do it with jquery :-
$('#nav li').on('click', function() { $(this).toggleClass("active"); $(this).siblings().removeClass("active"); });
Add following css :-
#nav li.active{ background: red !important; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.