CODEWITHSUNDEEP
jqueryhtmlcss
Devon
Devon

Reputation: 159

Can't add active class to parent li tab upon child li clicked

<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>

How can i add a .active class to my parent li if there is a active class in the sub-navigation li a?

as seen above 1 of the child li has a .active class and i did the following codes and it doesn't work.

$(".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
});

Basically i want that if 1 of my child tab is selected, both the child & parent will get the active class.

css

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

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

Upvotes: 0

Views: 1980

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this:

$(".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

Upvotes: 0

Vinita Rathore
Vinita Rathore

Reputation: 550

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

});

Demo:

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

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

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

.active {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Upvotes: 0

deviloper
deviloper

Reputation: 7240

try this:

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

Demo:

$(".dropdown .sub_navigation li a").click(function() {
  $(".active").removeClass('active');
  $(this).closest('.dropdown').find('a:first').addClass("active");
  $(this).addClass("active");
});
.active {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Upvotes: 1

Related Questions