更改元素样式CSS onclick？

Question

I don't know why my CSS does not work here is my jsfiddle , I tried focus but when I click around even if it is not a link the effect goes away?

<div class="footer-container">
    <ul>
        <li id="color"><a href="#">English(US)</a></li>

    </ul> 

</div>

$(document).ready(function(){
$("#color").click(function(){
    $(this).css("color", "black");
});
});

Answer 1

By using $("#color") you are targeting the parent of your concerned element. Use $("#color a") :

$(document).ready(function(){
$("#color a").click(function(){

    $(this).css("color", "black");
});
});

https://jsfiddle.net/bh58c1pf/

Or you can do:

$(document).ready(function(){
    $("#color").click(function(){

        $(this).children().eq(0).css("color", "black");
    });
    });

But it would be slower