javascript - js Comment ajouter dynamiquement la couleur d'arrière-plan d'un Li et supprimer la même classe d'un autre Li frère

Question

<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;
})

Je souhaite changer la couleur de ceci lorsque je clique dessus, mais d'autres éléments du même niveau annulent la couleur d'arrière-plan existante. Et lorsque d'autres éléments frères sont cliqués, les éléments frères obtiennent la couleur d'arrière-plan, et la couleur d'arrière-plan de celui-ci est annulée.

Answer 1

Selon l'idée de​​votre code, vous voulez juste faire fonctionner l'élément span et n'avez pas l'intention d'utiliser li, donc le code est implémenté comme ça

$('.list-nav').first().addClass("spanList");
$('.list-nav').on('click',function(){
    $(this).css("background","#6090b6");
    $(this).addClass("spanList");
    
    /** 以下这段实现你说的功能 **/
    var $otherSpans = $(this).closest('li').siblings().find('span.list-nav');
    $otherSpans.css("background", "");
    $otherSpans.removeClass("spanList");
     /** 以上这段实现你说的功能 **/
    
    var href = $(this).attr("href");
    var pos = $(href).offset().top;
    $("html,body").animate({scrollTop: pos}, 1000);       
    return false;
})

Démo en ligne

Answer 2

…$this.addClass("").closest("li").siblings("li").find("").removeAttr("")