Toggling an "active" class between cousins
So I currently have three unordered lists in my header. This is a single-page site that uses anchors to navigate. I need to have an "active" class to toggle between any anchor that is clicked between these three unordered lists. I still relatively new with jQuery and programming in general, but the basic structure of the page is outlined below.
<div id="header">
<div id="brands-nav">
<h3>Brands:</h3>
<ul class="navitems">
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchore</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
</ul>
</div>
<div id="mediums-nav">
<h3>Mediums:</h3>
<ul class="navitems">
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
开发者_开发知识库 <li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
</ul>
</div>
</div>
<div id="about-nav">
<h3>About:</h3>
<ul class="navitems">
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
</ul>
</div>
So, I am trying to figure out how to add an "active" class to any of those that are clicked as well as removing the active class from any cousins.
I understand the basic way to do this if all the elements are contained by the same parent with something like this...
$(document).ready(function(){
$("#mediums-nav a").click(function(){
$(this).toggleClass("active");
$(this).siblings("a").removeClass("active");
});
});
So how would I go about extending that to all of it's cousins?
Try this:
var allAnchors = $('.navitems a').click(function(){
allAnchors.removeClass('active');
$(this).addClass('active');
});
精彩评论