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
,则可以使用。
答案 0 :(得分:0)
您正在通过CSS将背景颜色添加到<a>
元素。您正在使用jQuery定位<li>
元素。就你所知,jQuery可以正常工作,但你看不到它,因为<a>
元素有背景颜色。
尝试更改jQuery以定位<a>
元素。定位return false
元素时,请务必preventDefault()
或使用<a>
。
另外,作为旁注,除非你还有其他我不知道的事情,否则只需将选择类硬编码到第一个元素而不是用jQuery来定位它就会更有效率。只是一个提示。
答案 1 :(得分:0)
这里有几个问题。
li
,因此上下文将是li
元素#myMenu ul li a
最初将您的代码和CSS更改为:
CSS:
#myMenu ul li a.selection {
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
}
代码:
$(function () {
$("li:first-child").addClass("selection");
// Or move your handler to the anchor rather than the list item
$('li').click(function () {
$('#myMenu li a').removeClass('selection');
$(this).find('a').addClass('selection');
});
});
答案 2 :(得分:0)
另外要添加到Chris的答案中...... #myMenu ul li a
的css总是会超过.selection
,因为它具有更高的特异性。如果您希望它们覆盖!important
.selection
添加到#myMenu ul li a
中的任何样式
答案 3 :(得分:0)
一般来说,虽然jQuery会自动进行自动选择,但我个人喜欢自己处理,因为我知道我的代码是“选择”我想要的东西。
所以喜欢这个:
$(function () {
$("li:first-child").addClass("selection");
$('li').each(function(){ //loop all li elements
$(this).click(function () {
$('#myMenu li.selection').removeClass('selection'); //select the li
// with the selection class
$(this).addClass('selection');
});
});
});
但基本上我看到你如何做到这一点的问题是你没有保证金,或你的李上填充,女巫可以使李的变化看不见。
与以下内容一起使用时,它应告诉您这是否有效
.selection{
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
padding:5px; //change to suit your needs
}