<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>
Is there a way to add the .active class to the parent li if a child li in the sub-navigation also has an active class?
In the code snippet above, one of the child li elements has an .active class. I tried the following code but it didn't work as expected.
$(".dropdown .sub_navigation li a").click(function(){
$(this).closest('.dropdown').addClass("active"); // does not work
$(this).closest('.dropdown').css("background", "blue"); // does not work
$(".dropdown").css("background","red"); // works, but it highlights all .dropdown tabs, which is not the desired outcome. This was just a test to check if the function works
});
Essentially, I want both the child and parent elements to have the active class if a child tab is selected.
CSS
.dropdown:first-child a.active{
background: #672783;
}
.dropdown:nth-child(2) a.active{
background: #ff6100;
}