클릭시 활성 상태가 작동하지 않음 (목록)

Question

CSS의 "활성"상태에 약간의 문제가 있습니다. 나는 <ul>에 4 개의 목록이 있고 나는이 링크들을 다른 background-color에주고 싶다 (그런 식으로 머물러 라!) 그들이 클릭되면. 문제는이 작동하지 것입니다 ...

이 내 HTML입니다 :

<nav id="quick-index-nav"> 
<ul id="quick-index-list" class="pills slim muted"> 
<li class="active"> 
<a id="qindex-popular" title="..." target="right" href="right.php">everything</a> 
</li> 
<li> 
<a id="qindex-today" title="..." target="right" href="right.php?t=tod">today</a> 
</li> 
<li class="yesterday"> 
<a id="qindex-yesterday" title="..." target="right" href="right.php?t=yes">tomorrow</a> 
</li> 
<li> 
<a id="qindex-day" title="...." target="right" href="right.php?t=mix">never</a> 
</li> 
</ul> 
</nav> 

이 내 CSS 파일입니다

#quick-index-nav{margin-bottom:10px; margin-left: -50px;} 
#quick-index-list{margin-bottom:0;*zoom:1;border:0px ridge #d9d9d9} 
#quick-index-list:before,#quick-index-list:after{display:table;content:""} 
#quick-index-list:after{clear:both} 
#quick-index-list li{display:inline-block;float:left;width:25%;margin:0;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-right:0px ridge #d9d9d9} 
#quick-index-list li:nth-child(4n){border-right:0px} 
#quick-index-list li:nth-child(n+5){border-top:0px ridge #d9d9d9} 
#quick-index-list li>a{padding:0;display:block;font-size:1.0em;text-align:center; font-family: Calibri;} 

.pills>li{display:inline-block;margin-bottom:5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #d9d9d9} 
.pills>li>a{padding:6px 10px;cursor:pointer;display:inline-block} 
.pills>li>a:hover{text-decoration:none} 
.pills>li:hover{background-color:#d9d9d9;text-decoration:none} 
.pills>li.active{background-color:#456695;border-color:#456695} 
.pills>li.active>a{color:#fff} 
.pills.slim>li>a{padding:3px 5px;font-size:.9em} 
.pills.muted>li>a{color:gray} 
.pills.muted>li.active>a{color:#fff}; 
.muted { 
    color: gray; 
} 

그것은 어떤 문제가 있습니까?

PS : 당신이 pills>li:active>a이 있어야하는 것보다 여기, http://jsfiddle.net/1BJK903/fxTQL/5/ 내가 알고있는 것처럼

Answer 1

, 당신은 활성 의사 클래스를 사용하고자하는 데모입니다. 이 링크에 적용되는 것처럼 또한, 난 단지 (그것을 사용하지 않는이 잘못 될 수있다 않음)을 알고, 그래서 아마도 당신은 이런 식으로 클래스를 변경해야합니다 몇 가지 테스트가 나타난 후 pills>li>a:active

업데이트

을 이 pills>li:active>a은 FF, Chrome 및 IE8 +에서 작동하며 IE7에서는 작동하지 않습니다.

이 코드로 페이지에서 jquery를 사용하도록 설정할 수 있습니다. 두 번째 스크립트 태그는 클래스를 변경하는 코드를 포함합니다.

<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
    $(".pills li").click(function(){ 
     $(".pills li").removeClass("active"); 
     $(this).addClass("active"); 
    })​ 
}) 
</script>