Question

我有一个导航菜单，当我点击任何菜单时，它的背景作为家庭项目不会保持选中我尝试了我的最好，也做谷歌搜索但无法解决我的导航菜单是

enter code here

 <ul id="navigation">
            <li id="selected" style="width: 90px"><a href="Default.aspx">Home</a></li>
            <li class="hov" style="width: 130px"><a href="Help.aspx">Get Help</a></li>
            <li class="hov" style="width: 90px"><a href="Price.aspx">Pricing</a></li>
            <li class="hov" style="width: 90px"><a href="Contact.aspx">Contact</a></li>
            <li class="hov"><a class="hov" href="Disclaimer.aspx">Disclaimer</a></li>
        </ul>
enter code here

，其CSS为：

#navigation
{
list-style: none;
padding: 0px;
margin: 0px;
float: right;
width: 570px;
border: 0px solid red;
font-size: 16px;
margin-top: -30px;
}
#navigation li
{
float: left;
width: 150px;
height: 40px;
margin-left: 3px;
text-align: center;
border-radius: 5px;
padding-top: 0px;
border: 0px solid black;
position: relative;
border: 0px solid black;
display: block;
}
.hov a
{
color: black;
}

#navigation li a
{
border: 0px solid black;
height: 30px;
display: block;
text-align: center;
padding-top: 8px;
text-decoration: none;
border-radius: 5px;
}
#selected a
{
background-color: #097Abf;
color: White;
}
#selected a:hover
{
background-color: #216894;
color: White;
}
.hov a:hover
{
color:  #097Abf;
background: url('supimages/field-bg.gif') repeat-x scroll 0px bottom #FFF;
}

Answer 1

我刚刚改变了一两件事来向你展示我的方法，你应该很容易理解这一点，因为你到目前为止。

我添加了一类.active（您选择的旧版）

#navigation a.active
{
background-color: #097Abf;
color: White;
}

我添加了以下Jquery，以便在单击时从链接中添加和删除该类。

   $("#navigation a").click(function(){
    $("#navigation a.active").removeClass("active");
        $(this).addClass("active");
   });

HERE IS A FIDDLE

单击任何导航项目它不会保持选中状态

1 个答案: