點擊活動狀態不起作用（列表）

我在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：這裏是一個演示http://jsfiddle.net/1BJK903/fxTQL/5/

來源

2012-09-14 1BJK903

您尚未爲'a：active'定義任何樣式。你只有兩個使用'background-color'的規則，並且兩者都可見。您希望哪個規則對點擊鏈接有效？（[jsbin demo]（http://jsbin.com/esezik/1/edit）） – lanzz

如何添加'.active'class？ JavaScript的？你可以發佈嗎？ – albertedevigo

我不使用Javascript或jQuery（如果有的話，這將是受歡迎的），我也不使用僞元素，所以我想這是什麼錯誤。我怎麼做呢？ – 1BJK903

據我瞭解，你想使用active僞類，應該比你有pills>li:active>a。另外，我知道好像它是適用於只鏈接（從來沒有使用過它，這可能是錯誤的），所以可能你需要改變你的類是這樣的：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>

來源

2012-09-14 14:15:25

嗨，那裏，謝謝你的回答... 我想獲得點擊列表的背景顏色變化。你說的東西沒有用。我早些時候嘗試過。 – 1BJK903

好...看到這[jsFiddle]（http://jsfiddle.net/2XYtY/2/）。它適用於我在鉻 –

呃。如果你希望它在點擊後保持這種狀態 - 這將不起作用。而CSS本身並沒有這樣的東西。：只有當您按住鼠標按鈕時纔會應用活動。 –

點擊活動狀態不起作用（列表）

回答

相關問題