Question

使用以下代码我希望用户点击里面的标签（div ul li a）默认情况下，第一个标记有一个类＆＃39; on＆＃39;。当点击标签时，代码应该是addClass（＆＃39; on＆＃39;）to＆＃39; this＆＃39;并从所有其他兄弟姐妹中删除Class（＆＃39; on＆＃39;）。 addClass（＆＃39; on＆＃39;）有效，但$（this）.siblings（）。removeClass（＆＃39; on＆＃39;）根本不起作用。

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>

Answer 1

根据您的代码（.profile_menu01 ul li > a），a代码没有兄弟。使用以下代码段删除on类。

$(this).closest("ul").find("a.on").removeClass("on")

示例：

var menu01_list = $(".profile_menu01 ul li > a"); menu01_list.click(function() { $(this).closest("ul").find("a.on").removeClass('on'); $(this).addClass('on'); });

.on{ background:Yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="profile_menu01"> <ul> <li><a class="btn_my_pick on" href="#">My Pick</a></li> <li><a class="btn_my_pickpot on" href="#">3<span class="alert_num"></span>My Picpot</a></li> <li><a class="btn_my_review on" href="#">My ReView</a></li> <li><a class="btn_my_photos on" href="#">My Photos</a></li> </ul> </div>

Answer 2

你正在看<a>元素的兄弟姐妹 - 因为它们包含在<li>中，所以没有兄弟姐妹。在检查兄弟姐妹之前，您必须遍历一级到<li>（并退回）：

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

Answer 3

你在下面的脚本上犯了一个小错误，

var menu01_list = $(".profile_menu01 ul li > a");

    menu01_list.click(function(){
       $(this).siblings().removeClass('on');
       $(this).addClass('on');
    });

在上面的代码中，您尝试从<a>锚标记中删除不是兄弟元素的类，因为这些锚标记由父元素<li>分隔。

尝试以下脚本解决您的问题，

var menu01_list = $(".profile_menu01 ul li > a");

    menu01_list.click(function(){
       $(this).parent().siblings().children('a').removeClass('on');
       $(this).addClass('on');
    });

Answer 4

var menu01_list = $(".profile_menu01 ul li > a");

    menu01_list.click(function(){
       $(this).parent().siblings().children('a').removeClass('on');
       $(this).addClass('on');
    });

JQuery不会选择兄弟元素

4 个答案: