How to choose and switch like this?

<ul class="feature-nav feature-nav-scroll">
    <li class="feature-nav-item"><a href="-sharp" class="nav-btn nav-btn-active">Function</a></li>
    <li class="feature-nav-item"><a href="-sharp" class="nav-btn">Configuration</a></li>
    <li class="feature-nav-item"><a href="-sharp" class="nav-btn">Download</a></li>
    <li class="feature-nav-item"><a href="-sharp" class="nav-btn">Compatible Device</a></li>
</ul>
$(".nav-btn").on("click",function(){
    $(this).addClass("nav-btn-active").removeClass("nav-btn-active");
})

doesn"t work?

Mar.09,2021

choose father, then father and brother, and then removeClass ('nav-btn-active'), son of father and brother;

$(this).addClass('nav-btn-active').parent().siblings().children().removeClass('nav-btn-active');

or first go to the father's father to find the node with 'nav-btn-active'' below removeClass
and then $(this). AddClass ('nav-btn-active')


The simpler way to write

is:

  

$('.nav-btn-active'). RemoveClass (' nav-btn-active');
$(this) .addClass ('nav-btn-active');

Menu