css主動功能不能正常工作

我有下面的菜單欄，我想在選擇頁面時將css類更改爲html代碼的活動狀態。因此，當用戶選擇觀看所述網頁我想的是設定已經設置css主動功能不能正常工作

HTML代碼

<div id="main-nav"> 
    <ul> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
     <li><a href="#">Four</a></li> 
    </ul> 
    <div class="clear-both">&nbsp;</div> 
</div>

CSS代碼

#main-nav{ 
    height:29px; 
    float:left; 
    background-image:url(../Styles/images/nav-bg.gif); 
    background-repeat:repeat-x; 
    background-position:top left; 
    width:100%; 
} 

#main-nav ul, 
#main-nav li{ 
    padding:0px; 
    margin:0px; 
    list-style-type:none; 
} 

#main-nav ul{ 
    height:29px; 
    line-height:29px; 
    background-image:url(../Styles/images/nav-bar.gif); 
    background-position:right; 
    background-repeat:no-repeat; 
    float:left; 
    padding:0px 1px 0px 0px; 
    margin:0px 0px 0px 10px; 
} 

#main-nav li{ 
    height:29px; 
    line-height:29px; 
    display:inline; 
    position:relative; 
    float:left; 
    width:80px; 
    text-align:center; 
} 

#main-nav li a{ 
    height:29px; 
    width:80px; 
    text-align:center; 
    float:left; 
    background-image:url(../Styles/images/nav-bar.gif); 
    background-position:left; 
    background-repeat:no-repeat; 
} 



#main-nav li a:link, 
#main-nav li a:visited{ 
    color:#FFFFFF; 
    text-decoration:none; 
} 

#main-nav li.active a, 
#main-nav li a:hover{ 
    background-image:url(../Styles/images/active.gif); 
    background-repeat:no-repeat; 
    background-position:left; 
}

來源

2013-02-25 user2108195

有沒有JavaScript設置活動類點擊李？ – Joe 2013-02-25 17:27:48

在生成HTML時，應在ASP代碼中設置'.active'類。這個CSS與這個問題無關。你試過什麼了？ – feeela 2013-02-25 17:40:01

我試過了：主動不行，我不知道還有什麼可以嘗試 – user2108195 2013-02-26 08:49:55

的關鍵是使列表 - 活動類基於位置的菜單：

不要選擇列表（除了顯示，位置和浮動以及清除邊距和填充）
使用display:block並將所有樣式放在A -tag（這包括您的懸停和活動狀態）。

此外，選擇display:inline-block，或float:left，不能同時使用。

來源

2013-02-25 17:29:59

css主動功能不能正常工作

回答

相關問題