Result

li要素をクリックでハイライトする。1つの情報が多いリストの可視性を高めたり等、他にも応用できそう。このままのコードだとネストされたリストは子要素も全てハイライトするので入れ子に対応するには少し工夫が必要になります。

jQuery

$("#foo").on('click', 'li', function () {
    $("#foo li.active").removeClass("bar");
    // liクリック時にclass付与
    $(this).addClass("bar");
});

css

.bar {/*ハイライトする時のスタイル*/
    background-color:yellow;
    color:red;
}

html

<ul id="foo">
<li><img src="http://placeimg.com/30/30/any">りんご</li>
<li>ごりら</li>
<li>らんぷ</li>
<li>ぷらんたー</li>
</ul>

via

Add active class to Li on click jquery.