javascript - Select a tag, add class style to the selected tag, and delete class style to sibling elements

Question

Click a label to add a class style to it and delete the class style of its sibling elements.

//Click event,
$(".user-menu li a").click(function(){

//单击时,给他添加样式,同时遍历同辈元素删除该样式
//但是实现不了,是不是我的思路错了
$(this).addClass("active").siblings().removeClass("active");        

});

//Tag, there is an a tag in the li tag. Initially, only the collection vehicles have styles, I don’t know why it cannot be displayed.
<ul class="user-menu">
<li> ;Collect vehicles</li>
<li>Price reduction reminder</li>
<li>Browsing history</li>
</ul>

When not clicked

After clicking, you want to add a demonstration to the label you want to click. Delete the style of the original label, leaving only one style

What you want to achieve after clicking is not achieved

Answer 1

$(".user-menu li a").click(function(){

//先全部干掉
$(".user-menu li a").removeClass("active");    
//再给this加上
$(this).addClass("active");        

});
This is how I usually use it, and I’d like to ask for a better solution;
Supplement: Your selector selects the a tag inside the li tag, and then you look for the sibling elements of the a tag, but you can’t find other li The a tag under the tag.

Answer 2

First traverse all elements, then add a style to the current one, and remove this style from the others

Answer 3

My plan:

$('.user-menu li a').on('click.app', function(){
    // 自身加属性 - 同辈移属性
    $(this).addClass('active')
        .parent() // 退回到父级 li
        .siblings()
        .removeClass('active');
});