<ul>
    <li><a href="#banner"><span class="list-nav"></span></a></li>
    <li><a href="#section-one"><span class="list-nav"></span></a></li>
    <li><a href="#section-two"><span class="list-nav"></span></a></li>
    <li><a href="#section-three"><span class="list-nav"></span></a></li>       
</ul>

$('.list-nav').first().addClass("spanList");
$('.list-nav').on('click',function(){
    $(this).css("background","#6090b6");
    $(this).addClass("spanList");
    $(this).siblings().removeClass("spanList");
    var href = $(this).attr("href");
    var pos = $(href).offset().top;
    $("html,body").animate({scrollTop: pos}, 1000);       
    return false;
})

Ich möchte die Farbe ändern, wenn ich darauf klicke, aber andere Li auf derselben Ebene heben die vorhandene Hintergrundfarbe auf. Und wenn auf andere Geschwisterelemente geklickt wird, erhalten die Geschwisterelemente die Hintergrundfarbe und die Hintergrundfarbe wird gelöscht.