使用以下代码,我希望用户单击 li (div ul li a) 内的标签 默认情况下,第一个标签有一个类“on”。单击标签时,代码应该将 addClass('on') 添加到 'this' 并从所有其他 sibling 中删除 Class('on')。 addClass('on') 有效,但 $(this).siblings().removeClass('on') 根本不起作用。
var menu01_list = $(".profile_menu01 ul li > a");
menu01_list.click(function(){
$(this).siblings().removeClass('on');
$(this).addClass('on');
});
html代码:
<div class="profile_menu01">
<ul>
<li><a class="btn_my_pick on" href="#">My Pick</a></li>
<li><a class="btn_my_pickpot" href="#">3<span class="alert_num"></span>My Picpot</a></li>
<li><a class="btn_my_review" href="#">My ReView</a></li>
<li><a class="btn_my_photos" href="#">My Photos</a></li>
</ul>
</div>
最佳答案
您正在查看 <a>
的 sibling 元素 - 因为它们包含在 <li>
中, 没有 sibling 。您必须遍历一级直到 <li>
(并退缩)在检查 sibling 之前:
menu01_list.click(function(){
$(this).parent().siblings().children().removeClass('on');
$(this).addClass('on');
});
或者,您可以在 li 上运行该函数:
var menu01_list = $(".profile_menu01 ul li");
menu01_list.click(function(){
$(this).siblings().children().removeClass('on');
$(this).children().addClass('on');
});
关于JQuery 不会选择兄弟元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48494509/