Проблема при добавлении класса в список

Question

Можете ли вы, пожалуйста, дайте мне знать, почему я не могу добавить класс в список здесь: Link и вот код

$(document).ready(function() { 
    // Handler for .ready() called. 
    $("li").on("click", function() { 
     //alert($(this).text()); 
     $(this).addClass("red"); 
    }); 
}); 

Answer 1

Вам нужно добавить класс для тега тега not li.

$(document).ready(function() { 
    // Handler for .ready() called. 
    $("li a").on("click", function (e) { 
     e.preventDefault(); 
     //alert($(this).text()); 
     $(this).addClass("red"); 
    }); 
}); 

demo

Answer 2

Класс добавлены правильно, вы можете изменить свои правила CSS на:

li.red a { 
    color:red; 
} 

Чтобы получить текст ссылки в красном цвете (при условии, что это то, что вы хотите).

Answer 3

Похоже css specificity проблемы, добавить более конкретные правила, чтобы применить стиль, чтобы закрепить элементы

.red a{ 
    color:red; 
} 

Демо: Fiddle

Answer 4

Класс добавления скрипт работает у вас есть для изменения вашего css

li.red a{color:red;} 

Answer 5

Класс добавлен. Вы должны добавить css в тег привязки.

Обновлена ​​скрипка.

http://jsfiddle.net/wSt6Q/3/

$(document).ready(function() { 
     // Handler for .ready() called. 
     $("li").on("click", function() {  
      $(this).addClass("red"); 
     }); 
    }); 

.red a { 
    color:red; 
} 

Answer 6

Вы должны предотвратить действие вашего тега привязки по умолчанию.

$(document).ready(function() { 
    // Handler for .ready() called. 
    $("li a").on("click", function (e) { 
     e.preventDefault(); 
     //alert($(this).text()); 
     $(this).addClass("red"); 
    }); 
}); 

Здесь Fiddle

Answer 7

Другой пример:

HTML:

<ul> 
    <li data-color="red">Red</li> 
    <li data-color="blue">Blue</li> 
    <li data-color="green">Green</li> 
</ul> 

<div> 
    <label>Selected Color</label> 
</div> 

CSS:

.red{ 
    color: white; 
    background: red;  
} 

.blue{ 
    color: white; 
    background: blue; 
} 

.green{ 
    color: white; 
    background: green; 
} 

div{ 
    text-align: center; 
    width: 500px; 
    height: 500px; 
    margin: 0 auto; 
} 

JS:

$('li').on('click', function(){  
    var selectedColor = $(this).data('color');  
    $('div').removeClass(); 
    $('div').addClass(selectedColor);  
}); 

http://jsfiddle.net/cfVw8/