4

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

4 回答 4

3

看：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;
}
于 2012-12-13T01:06:59.853 回答
1

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

.selected { background-color: green; }

那么您的链接将是：

<li><a class='selected' href="index.html">| About</a></li>
于 2012-12-13T01:00:39.050 回答
0

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

于 2012-12-13T01:00:05.867 回答
-1

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

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

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

li.current {
    background-color: #f1f1f1;
}
于 2012-12-13T01:00:18.773 回答