当前页面上的按钮图像答案

【问题标题】：Button Image on Current Page当前页面上的按钮图像
【发布时间】：2013-02-14 11:16:04
【问题描述】：

目前，我的导航栏上有图片链接，以及当您将鼠标悬停在链接上时的其他图片。我想知道设置它的最佳方法，以便用户所在的当前页面显示第三张图片。

例如，用户在 index.html 上，这将是导航栏上的 Home，所以我希望 Home 是与 About、Contact 等不同的图像。这是我当前的 HTML 和 CSS。

<ul id="navbar">
    <li id="bf"><a class="button" href="index.html">Home</a></li>
    <li id="bf"><a class="button" href="about.html">About Us</a></li>
    <li id="bf"><a class="button" href="contact.html">Contact</a></li>
    <li id="bf"><a class="button" href="images.html">Images</a></li>
</ul>

#navbar {
    left:50%;
    margin-left:325px;
    top:50%;
    margin-top:-100px;
}

#bf {
    display:inline;
}

a.button {
    display: -moz-inline-stack;
    display: inline-block;
    width: 147px;
    height: 49px;
    background: url("/images/btn.png") no-repeat;
    line-height: 43px;
    vertical-align: text-middle;
    text-align: center;
    color: #180a6b;
    font-family: Verdana;
    font-size: 25px;
    font-weight: normal;
    font-style: normal;
    text-shadow: #FFFFFF 1px 1px 0;
    text-decoration: none;
}

a.button:hover {
    background: url("/images/hovbtn.png") no-repeat;
    color: #8d8fc2;
}

【问题讨论】：

最好用PHP之类的后端来做这个后端，检查用户被请求的页面，然后在适当的导航项上设置一个类，如“当前”

标签： html css image button

【解决方案1】：

只需将一个活动类添加到列表项/链接，然后设置它的样式。你可以这样使用它：

<ul id="navbar">
<li id="bf"><a class="button active" href="index.html">Home</a></li>
<li id="bf"><a class="button" href="about.html">About Us</a></li>
<li id="bf"><a class="button" href="contact.html">Contact</a></li>
<li id="bf"><a class="button" href="images.html">Images</a></li>
</ul>

然后设置样式

#navbar li a:hover{
    background:red;
}
#navbar li a.active {
    background:yellow;
}

【讨论】：