Question

<div class="header_nav">
                    <ul id="navigation">

                        <li class="dropdown"><a href="#" rel="external">mainTab1</a>
                            <ul class="sub_navigation">
                                <li><a class="active" href="#">Sub Navigation 1</a></li>
                                <li><a href="#">Sub Navigation 2</a></li>
                                <li><a href="#">Sub Navigation 3</a></li>
                            </ul>
                        </li>

                        <li class="dropdown"><a href="#">MainTab2</a>
                            <ul class="sub_navigation">
                                <li id="tab_gad"><a href="#">Sub Navigation 1</a></li>
                                <li id="tab_iat"><a href="#">Sub Navigation 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

如果子导航中有活动类，我如何将.active类添加到我的父li？

如上所述，孩子李有一个.active类，我做了以下代码，但是没有用。

$(".dropdown .sub_navigation li a").click(function(){
       $(this).closest('.dropdown').addClass("active"); // don't work
       $(this).closest('.dropdown').css("background", "blue"); // don't work
       $(".dropdown").css("background","red"); // work, but it will highlight all the .dropdown tab, and this isn't actually what i want, just testing to make sure this function works
});

基本上我想要如果我的孩子选项卡中有一个被选中，那么孩子和孩子都会被选中。父母将获得活跃的课程。

CSS

.dropdown:first-child a.active{
background: #672783;
}

.dropdown:nth-child(2) a.active{
    background: #ff6100;
}

Answer 1

试试这个：

$(".dropdown .sub_navigation li a").click(function(){
    $(".active").removeClass('active');
    $(this).closest('.dropdown').find('a:first').addClass("active");
    $(this).addClass("active");
});

demo

Answer 2

试试这个：

$(".dropdown .sub_navigation li a").click(function(){
    $(".active").removeClass("active");

    var $dropDown =$(this).closest('.dropdown');
    $dropDown.find("a:first").addClass("active");      

    $(this).addClass("active");  
});

<强> DEMO

Answer 3

<强> DEMO

$(".dropdown > .sub_navigation > li > a").click(function(){
       $(this).parents('li.dropdown').siblings('li').removeClass("active");
       $(this).parents('li.dropdown').addClass("active"); 

});

点击子li后，无法将活动类添加到父li选项卡

3 个答案: