javascript - js So fügen Sie dynamisch die Hintergrundfarbe von li hinzu und löschen die gleiche Klasse anderer Geschwister-li

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

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.

Answer 1

根据你的代码反应的思路，你只是想操作span元素，并没有操作li的意图，所以代码这样实现

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

Answer 2

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