title: Toggling an "active" class between cousins
body: <p>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.</p>
  
  <pre><code>&lt;div id="header"&gt;
  
  &lt;div id="brands-nav"&gt;
  
      &lt;h3&gt;Brands:&lt;/h3&gt;
  
      &lt;ul class="navitems"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchore&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
      &lt;div id="mediums-nav"&gt;
  
      &lt;h3&gt;Mediums:&lt;/h3&gt;
  
      &lt;ul class="navitems"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
      &lt;div id="about-nav"&gt;
  
      &lt;h3&gt;About:&lt;/h3&gt;
  
      &lt;ul class="navitems"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Anchor&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>
  
  <p>I understand the basic way to do this if all the elements are contained by the same parent with something like this...</p>
  
  <pre><code>$(document).ready(function(){
  
  $("#mediums-nav a").click(function(){
    $(this).toggleClass("active");
    $(this).siblings("a").removeClass("active");
  });
  </code></pre>
  
  <p>});</p>
  
  <p>So how would I go about extending that to all of it's cousins?</p>