изменение класса li при щелчке

Не удалось изменить класс для li с помощью javascript.изменение класса li при щелчке

HTML

<ul id="mainmenu" style="width:130px"> 
<li class="mainmenudrop"><a href="" class="drop">Contact us </a> 
</li></ul>

CSS

#mainmenu { 
    list-style: none; 
    margin-left: 35px; 
    display: block; 
} 

#mainmenu li { 
    float: left; 
    padding: 3px 3px 3px 3px; 
    position: relative; 
    margin-right: 15px; 
    margin-top: 1px; 
    border: none; 
    cursor: default; 
    z-index: 999; 
    display: hidden; 
}

Это класс я хочу изменить:

#mainmenu li:hover { 
    border: 1px solid #aaa; 
    background: #fffff; 
    border-radius: 2px 2px 0px 0px; 
    padding: 2px 2px 2px 2px; 
    display: hidden; 
}

отдых УСС

#mainmenu li a { 
    font-family: Verdana, Arial; 
    font-size: 12px; 
    color: #444444; 
    text-decoration: none; 
    display: block; 
} 

#mainmenu li:hover a { 
    color: #333333; 
} 
#mainmenu li .drop { 
    padding: 1px 20px 2px 4px; 
    background: url("../images/arrow2.gif") no-repeat right 4px ; 
} 

#mainmenu li:hover .drop { 
    background: url("../images/arrow.gif") no-repeat right 4px; 
}

JS (желая использовать)

$(#mainmenu li:hover).click(function(){ 
    $(this).removeClass('menuhoverswap'); 
    $(this).addClass('menuhoverswap'); 
});

идентификатор поменяться

#menuhoverswap { 
border: 1px solid #aaa; 
}

Обычно будет хорошо делать это, но не могу получить мою голову вокруг него, как я сделал css для меню в другой разметке, ссылаясь на css на mainmenu, затем li, а затем давая li собственный класс.

источник

2015-01-10 alwayslearning

Должны ли мы предположить, что 'selector' есть, или вы ожидаете нам сказать? – adeneo

жаль, что не знаю, как обращаться к ли, что я хочу изменить #mainmenu li: наведите указатель на скрипт. класс i поменять его с будет называться «menuhoverswap» – alwayslearning

, если у вас есть ссылка на тег, он не будет работать coz при нажатии li тег будет запущен –

ОБНОВЛЕНО

Вы хотите добавить класс только на парении?

$('.drop').hover(
    function() { 
    $(this).addClass('selected'); 
    }, function() { 
    $('.drop').removeClass('selected'); 
    });

Здесь полный рабочий example с вашим кодом.

источник

2015-01-10 16:16:10 Bellu

да, но на mouseleave состояние должно вернуться к исходному идентификатору. не знаю, могу ли я настроить таргетинг на .drop, используя этот оператор, чтобы вывести меню вниз '$ (' a.drop '). click (function (e) { $ (this) .next ("div"). slideToggle (200 , 'easeOutCirc'); console.log ('div clicked'); e.preventDefault(); return false; }); $ ('li.mainmenudrop'). Mouseleave (function() { $ (this) .children ("div").скрыть ('средние'); }); ' – alwayslearning

sry can not get' code 'для форматирования нового здесь – alwayslearning

его также не заменяет класс, а добавляет один – alwayslearning

Это путают то, что вы пытаетесь достичь, но вот что я думаю, вы хотите попробовать.

http://jsfiddle.net/ccx9o55s/2

$(".mainmenudrop").on("mouseenter", function(e){ 
    $(this).addClass("menuhoverswap"); 
}); 

$(".mainmenudrop").on("mouseleave", function(e){ 
    $(this).removeClass("menuhoverswap"); 
});

источник

2015-01-10 17:47:59

normal = border: 1px dotted #ccc ,,, hover = border: 1px dotted #aaa ,,, onclick = border: 1px solid #aaa ,,,, onmouseleave = вернуться к нормальному классу. – alwayslearning

изменение класса li при щелчке

ответ

Смежные вопросы