addClass to current li element and removeClass

Question

I am trying to addClass of blue to when the next current li is clicked and removeClass of the previous li. However, I can't seem to get it working, it adds the class to the other li instead, but seems to remove the previous class.

Fiddle: https://jsfiddle.net/5otouLxg/1/

var $li = $("li a#t1:first-child");
var $li2 = $("li a#t2:first-child");
$('li').click(function () {
    if ($li.children().has

var $li = $("li a#t1:first-child");
var $li2 = $("li a#t2:first-child");

$('li').click(function () {
    if ($li.children().hasClass('nav-1')) {
        $li.children().addClass('blue');
        $li2.children().removeClass('blue');
    }
    if ($li2.children().hasClass('nav-2')) {
        $li.children().removeClass('blue');
        $li2.children().addClass('blue');
    }
});

.blue {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<li>
    <a id="t1">
        <span class="nav-1">HELLO</span>
    </a>
</li>
<li>
    <a id="t2">
        <span class="nav-2">HELLO</span>
    </a>
</li>

Answer 1

I think you can achieve what you want by simplifying your code: works with Two li's or A bunch of li's

$('li').click(function () {
    $(this).children('a').addClass('blue');
    $(this).siblings().children('a').removeClass('blue');
});

Answer 2

I've use another script to make it works

$('li').click(function(){
    $('li').removeClass('blue');
    $(this).addClass('blue');
});

The script will remove all 'blue' class of all the li (if more than 2), and add the class to the one that's been clicked.

Hope this is what you need.

Fiddle DEMO