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>