3

我试图让我的导航栏有一个当前页面指示器，并且我已经研究了所有可能的文章，并遵循了确切的示例，但它仍然无法正常工作。

我正在使用只有两个图像的精灵图像。该图像的宽度为 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;
}

感谢您的任何意见，并在此先感谢您！

4

2 回答 2

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;
}
于 2013-01-15T09:20:33.620 回答
0

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

于 2013-01-15T09:21:20.483 回答