1

我创建了一个导航栏，在导航栏中选择每个链接时，只有正文中的内容在变化。我使用 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>
4

4 回答 4

1

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

例如：

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

在这里检查

于 2013-07-03T09:43:08.363 回答
1 
div#menuwrapper ul li a:active {
    margin-top: -17px;
    margin-left: 0;
    width: 26px;
    color: red;
    height: 56px;
    background-color: #000;
}
于 2013-07-03T09:44:24.857 回答
1

:active伪类只会在点击期间生效，但是如果我理解正确 - 你想要的是点击后更改的样式 = 'selected' 。（那是对的吗？）

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

小提琴

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

另外，看看这篇文章，它展示了一些用 css 模拟点击事件的巧妙方法（其中一个是 :target 伪类。

于 2013-07-03T09:45:24.393 回答
1

您已经为“选定”类设置了背景颜色，因此在单击每个 li 时添加“选定”类，如下所示。

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

在这里查看演示

于 2013-07-03T09:58:03.923 回答