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

我试图让我的导航栏有一个最新的页面指示器，我已经研究了每一篇可能的文章，并遵循了确切的例子，但它仍然不起作用

我使用的精灵图像只有两个图像。图像的宽度为480，高度为40，每个图像的宽度为240，高度为40。一边是蓝色，另一边是黄色

我希望关闭状态为蓝色，然后悬停、活动和当前状态为黄色。但是，我现在不想处于活动状态

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

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

这是我的html的一部分：（我将只使用三个菜单项中的一个，profile。）

---

我感谢您的任何意见，并提前向您表示感谢

假设您根据所处的页面更改

正文

上的类，那么您只需修改最后一个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;
}

---

请尝试

#导航li a.accountbutton:active

而不是

：current

对不起，这是“accountbutton”的输入错误，我现在已修复。我在研究时发现，只有当鼠标点击它时，才是活动的，而不是当你在页面上时。我希望它突出显示，让用户知道他们在哪个选项卡上。active会帮我吗？我有三张不同的图片。每个菜单项一个。如果是这样的话，我将如何编写代码？@irishlady-我已经编辑了我的答案。我仍然假设您正在为每个页面的正文添加一个类。太好了！那很有魅力！非常感谢您的迅速回复！我再感激不过了！你太棒了！不用担心-很高兴我能帮忙：）

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