选择的链接不改变颜色

我已经创建了一个导航栏，并且在导航栏中选择每个链接时，只有内容在正在改变中。我使用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

选择的链接不改变颜色

回答

相关问题