Response title
This is preview!
Active state with more than 3 menu items
in Using jQuery
•
12 years ago
Hey guys,
This is probably a newbie question here but I have a submenu which has three categories. I would like for it to function the following way. When you click on the main category, the first sub category is already selected with the class of "active". Then when ever you click on the other sub-states, which ever one you selected gets the class of active and all the other sub categories present get that "active" class removed.
I've tried to go about this many ways and just end up confusing the hell out of myself. If anyone could lend a helping hand, it would be greatly appreciated.
So far, I've managed to get the first part working. When you click on navigation, the first sub-category gets the class of active.
html----
- <div id="navcontainer">
- <ul id="nav">
- <li id="nav1"><a href="#company" id="link1">Companies</a></li>
- <li id="nav2"><a href="#trading">Market Making & Proprietary Trading</a></li>
- <li id="nav3"><a href="#brokerage">Institutional Brokerage & Prime Services</a></li>
- <li id="nav4"><a href="#careers">Careers</a></li>
- <li id="nav5"><a href="#ourteam">Our Team</a></li>
- </ul>
- </div><!--/.navcontainer-->
- <div class="header3">
- <div id="subnav1"><h6><a href="#comp2">Experienced Traders</a></h6></div>
- <div id="subnav2"><h6><a href="#comp5">Assistant Traders</a></h6></div>
- <div id="subnav3"><h6><a href="#comp4">IT Professionals</a></h6></div>
- </div>
css-----
- #nav li a.active {color: #fff;}
- #subnav1 .active, #subnav2 .active, #subnav3 .active {color: #fff;}
- $('#nav li#nav4 a').click(function() {
- $('.header3 #subnav1 a').toggleClass('active');
- });
1