JS选择的项目无法在CSS菜单中正确显示

Question

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');
     });
 });

I want to add black colour to selected items background, but the above code is not working.

If I remove background-color:#333333 from #myMenu ul li a it works.

Answer 1

You are adding the background color via CSS to the <a> element. You are targeting the <li> element with your jQuery. For all you know, the jQuery could be working properly, but you can't see it because the <a> element has a background color.

Try changing the jQuery to target the <a> element instead. Be sure to return false or use preventDefault() when targeting the <a> element.

Also, as a side note, unless you have something else going on which I don't know about, it would be more efficient just hard code the selection class to the first element instead of targeting it with jQuery. Just a tip.

Answer 2

There are a couple of issues here.

• You have tied your click handler to li so the context will be the li element
• Your background color is set on the anchor: #myMenu ul li a initially
• Assuming you want .selection to apply to the anchor tag, it has less specificity than the class for the anchor.

Change your code and CSS to:

CSS:

#myMenu ul li a.selection {
    background-color: #000000;
    border-bottom:10px solid #000000;
    border-top:9px solid #000000;
}

Code:

$(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');
     });
 });

Demo Fiddle

Answer 3

Also to add to Chris's answer...the css for #myMenu ul li a will always outweigh the .selection because it is has more specificity. You will need to add !important to any styles in .selection if you want them to override the styles in #myMenu ul li a

Answer 4

Generally although jQuery does auto selection automatically I personally like to handle it myself, just because then I know my code is "selecting" what I want.

So Like this:

$(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');
        });
    });
});

But basically an issue I see with how you did it is there is no margin on you anchor, or padding on your li, witch could make the changes to the li invisible.

Used with the following it should tell you if this works

.selection{
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid  #000000;
padding:5px; //change to suit your needs
}