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

Я хочу, чтобы добавить черный цвет на выбранный элемент, но приведенный выше код не работает.

Если я удалю background-color:#333333 от #myMenu ul li a, он работает.

Answer 1

Здесь есть пара вопросов.

• Вы связали свой обработчик щелчка, чтобы li поэтому контекст будет li элемент
• Ваш цвет фона устанавливается на якорь: #myMenu ul li a первоначально
• Предполагая, что вы хотите .selection обратиться к якорным тэгом , он имеет меньшую специфичность, чем класс для привязки.

Изменить код и 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'); 
    }); 
}); 

Demo Fiddle

Answer 2

Вы добавляете цвет фона через CSS к элементу <a>. Вы нацеливаете элемент <li> на свой jQuery. Насколько вам известно, jQuery может работать правильно, но вы не можете видеть его, потому что элемент <a> имеет цвет фона.

Попробуйте изменить jQuery, чтобы вместо этого указать объект <a>. Обязательно укажите return false или используйте preventDefault() при ориентации на элемент <a>.

Кроме того, в качестве побочного примечания, если у вас есть что-то еще, о чем я не знаю, было бы более эффективным просто жестко закодировать класс выбора первому элементу, а не таргетировать его с помощью jQuery. Просто подсказка.

Answer 3

Кроме того, чтобы добавить ответ Криса .. , css для #myMenu ul li a всегда будет перевесить .selection, потому что он имеет большую специфичность. Вам нужно будет добавить !important любые стили в .selection, если вы хотите, чтобы переопределить стили в #myMenu ul li a

Answer 4

В общем, хотя 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 
}