выбранная ссылка не меняет цвет

Question

Я создал навигационную панель, и при выборе каждой ссылки в навигационной панели меняется только контент, изменяющийся в теле. Я сделал это с помощью 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> 

Answer 1

Класс :active псевдо только вступит в силу во время щелчка, однако если Я правильно понимаю: вы хотите, чтобы стиль изменился после щелчка = 'selected'. (Это правильно?)

Вы можете сделать это с помощью чистого css, используя псевдокласс класса :target.

FIDDLE

Примечание: Вам нужен современный браузер, чтобы использовать этот метод. (IE9 +)

Кроме того, обратите внимание на this article, который показывает некоторые умные способы для имитации щелчка события с помощью CSS (один из них являются:. Целевым классом псевдо

Answer 2

<li> вы хотите выбран должен иметь класс «выбранные». Без class="selected" он будет рассматриваться как обычный тег «li».
(уведомление также, что lia:active должен быть li a:active)

Например:

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

Проверить here

Answer 3

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

Answer 4

Вы установили цвет фона для ' selected 'class, так что добавьте' selected 'класс при щелчке каждого из них, как это.

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

Проверить демо here