1

CSS の「アクティブ」状態に少し問題があります。4 つのリストが<ul>あり、これらのリンクがクリックされた場合に別のリンクを提供したいと考えて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/

4

1 に答える 1

1

私が理解しているように、アクティブな疑似クラスを使用する必要がありますpills>li:active>a。また、リンクのみに適用されるようです（使用したことがなく、これは間違っている可能性があります）ので、次のようにクラスを変更する必要がある可能性があります。pills>li>a:active

アップデート

いくつかのテストの後、これpills>li:active>aは FF、Chrome、および IE8+ で機能し、IE7 では機能しないことが判明しました。

必要なことを行うには、このコードを使用してページで jquery を有効にします。2 番目のスクリプト タグには、クラスを変更するコードが含まれています。

<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-14T14:15:25.350 に答える