更改单个列表项的颜色答案

【问题标题】：Change the color of a single list item更改单个列表项的颜色
【发布时间】：2012-12-13 09:22:46
【问题描述】：

在 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;
}

【问题讨论】：

标签： html css html-lists

【解决方案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>

$(".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;
}

【讨论】：

【解决方案2】：

最简单的方法是创建一个类，假设已选中，将其添加到您想要更改颜色的标签中，就是这样：

.selected { background-color: green; }

那么您的链接将是：

<li><a class='selected' href="index.html">| About</a></li>

【讨论】：

这也假设您没有包含导航。如果您在每个页面中都有导航代码，这很简单。如果您使用单独的文件进行导航，则可以使用以下任何示例。

【解决方案3】：

我用这个答案回答了同样的问题，结果很好：http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

【讨论】：

【解决方案4】：

这个问题有点含糊；要指示用户在哪个页面上，您可以向包含他们上次单击的链接的特定列表项添加一个类：

<li class="current">
    <a href="html/prices.html">| Prices</a>
</li>

然后您为此提供特定样式：

li.current {
    background-color: #f1f1f1;
}

【讨论】：