選擇的鏈接不改變顏色

我已經創建了一個導航欄，並且在導航欄中選擇每個鏈接時，只有內容在正在改變中。我使用ajax進行了動態內容更改，現在我可以將懸停時菜單項的顏色更改，但選擇菜單項時不會更改顏色。選擇的鏈接不改變顏色

另外我也可以做，只要我點擊菜單我想選擇背景圖像正在改變，然後它重置爲舊的顏色。

我的代碼如下

HTML：

<div id="menuwrapper"> 
    <ul> 
     <li> 
      <a href="#"><img src="images/home.png"></a> 
     </li> 
     <li></li> 
    </ul> 
</div>

CSS：

div#menuwrapper ul li a:active { 
    margin-top: -17px; 
    margin-left: 0; 
    width: 26px; 
    color: red; 
    height: 56px; 
    background-color: #000; 
}

然後我添加了一個類來li和改變的CSS如下

div#menuwrapper li.selected a { 
    margin-top: -17px; 
    margin-left: 0; 
    width: 26px; 
    color: red; 
    height: 56px; 
    background-color: #000; 
}

但沒有任何變化。

這裏是我的編輯代碼，任何一個可以讓這個

/* Define the body style */ 
body { 
font-family:Arial; 
font-size:12px; 
} 

/* We remove the margin, padding, and list style of UL and LI components */ 
#menuwrapper ul, #menuwrapper ul li{ 
margin:0; 
padding:0; 
list-style:none; 
} 

/* We apply background color and border bottom white and width to 150px */ 
#menuwrapper ul li{ 
background-color:#333333; 
border-bottom:solid 1px #222222; 
width:56px; 
height:56px; 
margin-left:-240px; 

cursor:pointer; 
} 

/* We apply the background hover color when user hover the mouse over of the li component */ 
#menuwrapper ul li:hover{ 
background-color:#4abbed; 
position:relative; 
} 
/* We apply the link style */ 
#menuwrapper ul li a{ 
padding:5px 15px; 
color:#ffffff; 
display:inline-block; 
text-decoration:none; 
} 

div#menuwrapper ul li a:active { 
margin-top: -17px; 
margin-left: 0; 
width: 26px; 
color: red; 
height: 56px; 
background-color: #000; 
} 
div#menuwrapper li.selected a { 
margin-top: -17px; 
margin-left: 0; 
width: 26px; 
color: red; 
height: 56px; 
background-color: #000; 
} 


.nav a { 
text-align:center; 
float: left; 
text-decoration: none; 
color: #fff; 
padding: 10px; 
background: orange; 
margin: 0 10px 10px 0; 
} 
.menu:target 
{ 
background: red; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<div id="header"> 
<div id="menuwrapper"> 
<ul class="menu"> 
<li style="height:5px;background-color:#4abbed;border-bottom:solid 1px #4abbed;"> 
</li> 
<li> 
<a href="#" id="menu1" class="menu"><img src="images/home.png"/> 
</a> 
</li> 
<li> 
<a href="#" id="menu2" class="menu"><img src="images/Description.png"/> 
</a> 
</li> 
<li> 
<a href="#" id="menu3" class="menu" onClick="load('content', 'page2.php');"> 
<img src="images/Technical.png"/> 
</a> 
</li> 
<li> 
<a href="#" id="menu4" class="menu" onClick="load('content', 'page3.php');"> 
<img src="images/Download.png"/></a> 
</li> 
</ul> 
</div> 
</div>

來源

2013-07-03 Ambily

你在這裏缺少一個空格：'LIA：active' - >'李一：active' – mishik

我已經糾正了，但在選擇鏈接的顏色沒有改變 – Ambily

你能檢查我的答案嗎？ –

的:active僞類只會點擊期間生效，但如果我理解正確 - 你想要的是click ='selected'後改變的樣式。（是否正確？）

您可以使用純css使用僞類:target來做到這一點。

FIDDLE

注：你需要一個現代的瀏覽器來使用此方法。（IE9 +）

而且，看看this article這顯示了一些巧妙的方法來模擬與CSS click事件（其中一個是：目標僞類

來源

2013-07-03 09:45:24 Danield

這一個工作正常，但我怎麼能做到這一點當我想包括div ，li和ul – Ambily

我已經更新了這裏的小提琴：http：//jsfiddle.net/danield770/gaazS/1/ ul和li – Danield

它工作在jsfiddle但不適合我，任何方式非常感謝，可能是我的jquery的參考將被打破或感謝 – Ambily

提出了一些建議<li>你想選擇的必須有一類「選擇」。如果沒有class="selected"，它將被視爲正常的「li」標籤。
（另請注意，lia:active應該li a:active）

例如：

<li class="selected"> 
<a href="#"><img src="images/home.png"></a> 
</li>

檢查here

來源

2013-07-03 09:43:08 Sergio

div#menuwrapper ul li a:active { 
    margin-top: -17px; 
    margin-left: 0; 
    width: 26px; 
    color: red; 
    height: 56px; 
    background-color: #000; 
}

來源

2013-07-03 09:44:24 akash

已設置背景色「選擇'類，所以添加'選擇'類點擊每個李這樣的。

$('li').click(function() { 
    $('.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
});

檢查演示here

來源

2013-07-03 09:58:03

@sekar你可以請檢查我的代碼我已經添加在問題的結尾謝謝 – Ambily

選擇的鏈接不改變顏色

回答

相關問題