1

ナビゲーション パネルで jQuery を使用して CSS を適用すると問題が発生します。ユーザーがリンクをクリックすると、クラス .selected が適用されます。

私のhtmlコードは

 <ul id="example-two">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">People</a></li>
        <li><a href="#">Career</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Videos</a></li>
    </ul>

私のCSSコードは

#example-two li a { 
  position: relative; 
  z-index: 200;
  background-image: -moz-linear-gradient(#6C6C6C, #4A4A4A);
  border-radius:10px; 
  color: #FFF; 
  font-size: 14px; 
  display: block; 
  float: left; 
  padding: 6px 10px 4px 10px;
  text-decoration: none;
  text-transform: uppercase; 
}
#example-two li a:hover {
    background-image: -moz-linear-gradient(#ed2024, #c8171a);
    color: white; 
}

.selected{
    background-image: -moz-linear-gradient(#ed2024, #c8171a);
    color: white;
}

そして私のjQueryコードは

<script>
$(document).ready(function() {
    $('ul#example-two li a').click(function() {
       $('ul#example-two li a').removeClass("selected");
       $(this).addClass("selected");
    });
})
</script>

どこが間違っているのですか？

4

1 に答える 1

3

上部の CSS セレクターで背景画像の値をオーバーライドしています。CSS の優先順位の詳細については、こちらを参照してください。

.selectedに変更#example-two li a.selected

http://jsfiddle.net/EuuhZ/1/

于 2012-07-21T09:04:57.300 に答える