當前頁面上的按鈕圖像

我目前在導航欄上有圖像鏈接，以及當您懸停在鏈接上時的其他圖像。我想知道設置它的最佳方式，以便用戶所在的當前頁面顯示第三個圖像。當前頁面上的按鈕圖像

例如，用戶位於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

當前頁面上的按鈕圖像

回答

相關問題