html - 更改单个列表项的颜色

Question

有没有办法在 HTML/CSS 中改变一个列表项的颜色而不是所有的？我只想更改每个页面的颜色，以便用户知道他在哪个页面上。现在我只设法执行了 a:hover 但我无法弄清楚如何才能使颜色保持不变。

HTML:

<div id="nav">
    <div class="wrapper">
        <ul id="buttons">
        <li><a href="index.html">| About</a></li>
        <li><a href="html/gallery.html">| Gallery</a></li>
        <li><a href="html/prices.html">| Prices</a></li>
        <li><a href="html/faq.html">| FAQ</a></li>
        <li><a href="html/contact_us.html">| Contact Us</a></li>
        <div class="clear"></div>
        </ul>
    </div>
</div>

CSS:

#buttons {
background-color: black;
}

.clear { clear: both; }

#buttons li a
{
position:block;
color:#fff;
padding:1em;
text-decoration:none;
float:left;
width:95px;
}

#buttons li a:hover
{
background-color:#bc1b32;
}

Answer 1

看:http://jsfiddle.net/qzXgJ/

详细信息:

HTML

<div>
    <div class="wrapper">
        <ul>
        <li><a id="index" href="#">| About</a></li>
        <li><a id="gallery" href="#">| Gallery</a></li>
        <li><a id="prices" href="#">| Prices</a></li>
        <li><a id="faq" href="#">| FAQ</a></li>
        <li><a id="contact_us" href="#">| Contact Us</a></li>
        <div class="clear"></div>
        </ul>
    </div>
</div>​​​

JS

$(".wrapper li a").click(function () {

    $('.wrapper li a').each(function() {
        $(this).removeClass('selected');
    });

    $(this).addClass('selected');

    $(".wrapper ul li a").click(function () {

    $('.wrapper ul li a').each(function() {
        $(this).removeClass('selected');
    });

    $(this).addClass('selected');

    console.log($(this).attr('id'));

    /* Get html by jQuery */ 
    $.get($(this).attr('id'),function(data){
        $('#result').html(data);
    });

    return false;
});

CSS

.selected
{
    background-color:#b51ba2;
}