突出顯示菜單欄中的當前頁面

例子：

首頁常見問題解答CONTACT_US

我要顯示的頁面在菜單欄中選擇。我正在使用CSS，但不知道如何去做這件事。

我的CSS代碼：

.menu { 
    float: left; 
    margin: 0px 0 0 0; 
    width: 1000px; 
    } 
    .menu li { 
    border-left: 1px solid #fff; 
    float: left; 
    line-height: 1em; 
    text-align: center;} .menu li a { color: #fff; 
    display: block; 
    font: 17px Arial, Helvetica, sans-serif; 
    padding: 0px 31px;  
    line-height:47px; 
    text-decoration: none; 
     } 
    .menu li a span {display:block; padding:0px 15px;} 
    .menu li a:hover, .menu .active a{color:#fff; 
    background:#ed1f26 url(images/menuleft.jpg) left top no-repeat; 
    width:auto; 
    } 
    .menu li a:hover span, .menu .active a span 
    {background: url(images/menuright.jpg) right top no-repeat; 
    padding:0px 14px; 
    border:1px solid #b3c302; 
    }

來源

2012-03-19 ruby

您是否對菜單進行硬編碼或您是否使用翻譯？ – 2012-03-19 09:09:50

我只是添加我的CSS，用於激活頁面 – ruby 2012-03-19 09:21:11

您是否使用任何菜單選項卡模塊的東西。 – Rafee 2012-03-19 09:25:32

好吧，如果你正在寫的菜單到每個頁面（似乎是從你的意見的情況下），沒有什麼阻止你改變背景色爲特定<li>與該頁面相關。

以下示例顯示當前頁面（主頁）的白色背景或非活動頁面的默認顏色。

<li style="background-color:rgb(255,255,255);">Home</li> 
<li>FAQ</li> 
<li>Contact Us</li>

或者，你可以使用一些腳本，並創建標籤就像我在這個小提琴已經做：http://jsfiddle.net/gstubbenhagen/zAbmA/

我只想建議的標籤，如果你不具備的每一頁，你不要太多的內容我們不想製作一個非常大的頁面，它需要永久加載較慢的連接。

注：如果使用所提供的示例使用了jQuery插件的選項卡選項，請確保您添加相同的工具，如果你不打算重新對碼。

來源

2012-03-19 10:30:28 GStubbenhagen

突出顯示菜單欄中的當前頁面

回答

相關問題