Question

我正在尝试让我的导航栏有一个当前的页面指示器，我已经研究过每一篇文章，并且遵循了一些确切的例子，但它仍然无效。

我正在使用只有两个图像的精灵图像。图像宽度为480，高度为40，每张图像宽度为240，高度为40.一侧为蓝色，另一侧为黄色。

我希望关闭状态为蓝色，然后将悬停，活动和当前状态设置为黄色。但是，我现在并不关心活跃状态。

所以，我的问题是：我的关闭状态（蓝色方面），悬停状态（黄色方面）工作完美。我只需要当前状态（黄色方面）即可工作。因此，当您单击菜单项时，图像将保持黄色。

我为任何可怕的编码道歉，因为这是我的第一次尝试

这是我对html的一部分:(我将只使用三个菜单项之一，个人资料。）

<body bgcolor="CEB86C"; class="profile">

    <div id="navigation">
        <ul>
            <li><a class= "news" href="news.html" title"news"></a></li> 
            <li><a class="profile " href="index.html" title"profile"></a><li>
            <li><a class= "about" href="about.html" title"about"></a><li>
        </ul>
    </div>

这是CSS：

#navigation ul {
    list-style: none;
    text-align: center;
}
#navigation li {
    display: inline;
}
#navigation li a {
    text-indent: -5000px;
    display: inline-block;
    height: 40px;
}
#navigation li a.profile {
    width: 240px;
    background: url(images/profile.jpg);
    text-decoration: none;
}
#navigation li a.profile:hover {
    background: url(images/profile.jpg);
    background-position: -240px;
    text-decoration: none;
}
#navigation li a.profile:current {
    background: url(images/profile.jpg);
    background-position: -240px;
    background-repeat: no-repeat;
    text-decoration: none;
}

我感谢任何意见，并提前感谢你！

Answer 1

假设你根据你所在的页面更改了body上的类，那么你可以修改最后一个css声明：

.news #navigation li a.news,
.profile #navigation li a.profile,
.about #navigation li a.about {
    background:url(images/profile.jpg);
    background-position: -240px; 
    background-repeat: no-repeat;
    text-decoration:none;
}

编辑 - 如果您有3个单独的图像，那么您可以执行以下操作：

.news #navigation li a.news {
    background:url(images/news.jpg);
    background-position: -240px; 
    background-repeat: no-repeat;
    text-decoration:none;
}

.profile #navigation li a.profile {
    background:url(images/profile.jpg);
    background-position: -240px; 
    background-repeat: no-repeat;
    text-decoration:none;
}

.about #navigation li a.about {
    background:url(images/about.jpg);
    background-position: -240px; 
    background-repeat: no-repeat;
    text-decoration:none;
}

Answer 2

尝试使用#navigation li a.accountbutton:active代替:current

导航栏使用图像和CSS与当前状态

2 个答案: