title: jQuery - Find active tab
body: <p>I have a list of tabs:</p>
  
  <pre><code>&lt;ul class="tabs"&gt;
  &lt;li&gt;&lt;a data-id="1" href="#"&gt;AAA&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-id="2" href="#" class="active"&gt;BBB&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-id="3" href="#"&gt;CCC&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Then I have a button:</p>
  
  <pre><code>&lt;div id="button"&gt;Click Me&lt;/div&gt;
  </code></pre>
  
  <p>How can I, when click on the button, access the element that have the class active? I need to be able to get the data-id from the active item.</p>
  
  <p>So, something like this... (this doesn't work!)</p>
  
  <pre><code>$("#button").live("click", function(){
  
          var ref_this = $("ul.tabs li a").find(".active");
          alert(ref_this.data("id"));
  
  });
  </code></pre>