CSS
#myMenu ul li {
display: inline;
}
#myMenu ul li a {
background-color:#333333;
text-transform: uppercase;
font-weight: bold;
font-family:"Open Sans", Arial, sans-serif;
font-size:12px;
text-decoration: none;
padding: 1em 2em;
color: #000000;
border-left:1px solid #333333;
border-right:1px solid #333333;
border-top:1px solid #333333;
}
#myMenu ul li a:hover {
color: #fff;
background-color: #999999;
}
.selection {
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
}
HTML
<div align="right" id="myMenu">
<ul>
<li><a href="#" data-id="appstructurediv">Structure</a></li>
<li id="style"><a href="#" data-id="appstylediv">Style</a></li>
<li><a href="#" data-id="appdetailsdiv">Details</a></li>
</ul>
JavaScript
$(function () {
$("li:first-child").addClass("selection");
$('li').click(function () {
$('#myMenu li').removeClass('selection');
$(this).addClass('selection');
});
});
我想为选定的项目背景添加黑色,但上面的代码不起作用。
background-color:#333333
如果我从中删除#myMenu ul li a
有效。