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

Answer 2

最简单的方法就是创建一个类，让我们说选择，将它添加到你想要改变颜色的标签中，就是这样：

.selected { background-color: green; }

然后您的链接将是：

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

Answer 3

我已将此答案用于同一问题且结果良好：http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

Answer 4

这个问题有点模糊;要指明用户所在的页面，您可以将该类添加到包含他们最后点击的链接的特定列表项目中：

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

然后为此提供特定样式：

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

更改单个列表项的颜色

4 个答案: