2016-12-06 3 views
-1

Я хочу простой Js, если вы нажмете на соответствующую ли для выполнения функции changeBrasaoCamisa, alto поместите «ativo» в класс css.Измените класс li через js

Я попытался с не Sucess:

$("ul li").on("click", function() { 
    $("li").removeClass("ativo"); 
    $(this).addClass("ativo"); 
}); 

Html:

<div class="dorco"> 
    <ul style="list-style-type: none; cursor: pointer;"> 
    <li class="posEscudo esquerda ativo" a href="#" onclick='changeBrasaoCamisa("esquerda")'> 
     <img src="./imagens/btEscudoEsquerda.png" alt=""> 
    </li> 
    <li class="posEscudo ombro" a href="#" onclick='changeBrasaoCamisa("ombro")'> 
     <img src="./imagens/btEscudoOmbro.png" alt=""> 
    </li> 
    <li class="posEscudo centro" a href="#" onclick='changeBrasaoCamisa("centro")'> 
     <img src="./imagens/btEscudoCentro.png" alt=""> 
    </li> 
    </ul> 
</div> 
+0

Не используйте 'onclick' событие, это очень устарела. Ваш метод добавления ненавязчивого обработчика правильный [и работает] (https://jsfiddle.net/RoryMcCrossan/ne7d2roc/). Какая у вас проблема? Если класс не применяется, убедитесь, что правила достаточно конкретны, чтобы переопределить уже установленные, и проверить консоль на наличие ошибок. –

+0

Где ваш сценарий по отношению к вашей разметке? Он не в документе готов, поэтому, если он появляется перед разметкой, он не найдет элементы для привязки на – Taplar

+0

Просто не добавляйте класс «ativo» на li –

ответ

0

Ваш код работает - я сделал упрощенный пример, чтобы продемонстрировать:

HTML:

<ul> 
    <li class=" ativo"> 
     a 
    </li> 
    <li> 
     b 
    </li> 
    <li> 
     c 
    </li> 
</ul> 

CSS:

.ativo { 
    font-weight:bold; 
} 

JS:

$("ul li").click(function() { 
    $("li").removeClass("ativo"); 
    $(this).addClass("ativo"); 
}); 

См JSFiddle here