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

您要选择的<li>必须有一个“已选中”的课程。没有class="selected"，它将被视为普通的“li”标签（另请注意lia:active应为li a:active）

例如：

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

检查 here

Answer 2

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

Answer 3

:active伪类只会在点击过程中生效，但是如果我理解正确 - 你想要的是在click ='selected'之后改变的样式。（这是正确的吗？）

您可以使用:target伪类来使用纯CSS执行此操作。

<强> FIDDLE

注意：您需要使用现代浏览器才能使用此方法。（IE9 +）

另外，请查看 this article ，其中显示了使用css模拟点击事件的一些聪明方法（其中一个是：目标伪类。

Answer 4

您已为“已选定”类设置了背景颜色，因此请点击每个li添加“已选择”类。

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

查看演示here

选择的链接不会改变颜色

4 个答案: