JQuery/Javascript новичок здесь. Я создал меню. Когда пользователь наводит курсор на элемент в меню, я хочу изменить цвет фона. (Легко сделать с CSS.) Когда пользователь на самом деле выбирает элемент, я хочу, чтобы стрелка появлялась поверх имени элемента (например, эффект зависания с фоновым изображением). НО, в отличие от эффекта наведения, я хочу, чтобы стрелка оставалась пока пользователь не выберет другой пункт в меню. В принципе, я пытаюсь воссоздать то, что сделал Zappos здесь (см. Мини-плавающее меню слева от обуви): http://www.zappos.com/dr-scholls-jamie-black-dot?zfcTest=fcl% 3A0.
Я посмотрел на многие вопросы и ответы Stackoverflow о том, как выделить выбранный пункт меню, но ни один из них не совсем то, что я ищу, и это именно то, что делает плавающее меню Zappos.
Любая помощь будет принята с благодарностью!
anaanzi
Посмотрите, что я здесь сделал в jsfiddle.
Сделать аналогичный эффект при zappos
$(document).ready(function() {
$('ul li').hover(
function() {
if ( !$('div').hasClass('blue') ) {
$(this).addClass('gray');
}
},
function() {
$(this).removeClass('gray');
}
);
$('ul li').click( function() {
$('ul li').removeClass('blue');
$(this).addClass('blue');
});
});
Изменение: вы можете добавить необходимый эффект стрелки, добавив фон со стрелкой в класс css. В зависимости от того, хотите ли вы стрелку при наведении (серый класс) или щелчок (синий класс)
Вы можете использовать css для эффекта наведения. Предполагая, что навигация является неупорядоченным списком с классом "nav", код будет выглядеть примерно так:
.nav li a:hover {
background: #95ACC3;
}
Что касается эффекта щелчка, вы хотите использовать jQuery, чтобы добавить класс к любому элементу списка, который нажал. Например, приведенный ниже код сначала удаляет класс "активный" из всех элементов списка (это гарантирует, что только один элемент имеет активный класс за раз), затем он добавляет "активный" класс к любому элементу, который был нажат.
$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});
Здесь jsfiddle с рабочим примером того, что я говорю: http://jsfiddle.net/8CMxG/