Onclick事件与Css

即时尝试实现一个onClick事件到CSS中的导航栏。这是到目前为止我的代码：Onclick事件与Css

<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>

http://jsfiddle.net/dgbn33pv/

但问题是，我想留在红色按钮后，我就可以和它切换回灰后，我点击它点击再次。它可以用css实现，我可以检查按钮状态来过滤maincontent吗？

问候

来源

2015-01-10 h0ppel

点击事件由JavaScript处理而不是CSS处理。 –

你可以用'：active'来做技巧，但问题是保持活动状态。 – rafaeldefazio

可能的解决方案：纯JS（http://jsfiddle.net/1LLL839u/1/），jQuery（http://jsfiddle.net/a05hju0a/） – rafaeldefazio

可悲的是CSS没有一个onclick功能，您可能希望在CSS是最好的：活跃，但一旦你松开鼠标按钮一切都恢复到原来的状态。这其中的一个例子：在行动中积极

<div id="button"> 
</div> 

#button{ 
width:150px; 
height:50px; 
margin:50px auto; 
background:#555; 
} 
#button:active{ 
background:#f00; 
}

http://jsfiddle.net/dgbn33pv/

来源

2015-01-10 14:21:14 eliteware

您可以用jQuery做到这一点： -

$('#nav li').on('click', function() { 
 
    $(this).toggleClass("active"); 
 
    $(this).siblings().removeClass("active"); 
 
});

添加下面的CSS： -

#nav li.active{ 
 
    background: red !important; 
 
}

来源

2015-01-10 15:33:04

您的更新jsfiddle： - http://jsfiddle.net/dgbn33pv/ 7 / –

Onclick事件与Css

回答

相关问题