javascript - js Bagaimana untuk menambah warna latar belakang li secara dinamik, dan memadam kelas yang sama dengan adik beradik li yang lain

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

Saya ingin menukar warna ini apabila diklik, tetapi li lain pada tahap yang sama membatalkan warna latar belakang sedia ada. Dan apabila elemen adik beradik lain diklik, unsur adik beradik mendapat warna latar belakang dan warna latar belakang ini dibatalkan.

Answer 1

Mengikut idea kod anda, anda hanya mahu mengendalikan elemen span dan tidak berniat untuk mengendalikan li, jadi kod itu dilaksanakan seperti ini

$('.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;
})

Demo Dalam Talian

Answer 2

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