当前页面上的按钮图像

我目前在导航栏上有图像链接，以及当您悬停在链接上时的其他图像。我想知道设置它的最佳方式，以便用户所在的当前页面显示第三个图像。当前页面上的按钮图像

例如，用户位于index.html上，这将是导航栏上的主页，因此我希望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; 
}

来源

2013-02-14 Dax

这是最好做这个后端的东西，如PHP，检查用户请求的页面，然后设置一个类，例如“当前“在适当的导航项目上 – Andy 2013-02-14 11:17:30

只需添加一个类活跃列表项/链接，然后样式。 ü可以使用它像这样：

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

来源

2013-02-14 12:16:58 dinodsaurus

当前页面上的按钮图像

回答

相关问题