[jquery] Find Active Tab using jQuery and Twitter Bootstrap

I've been racking my brain for a little while now, and I would like to know if anyone out there knows how I can find the active tab, using jQuery and Twitter's Bootstrap. Pulling the hash from the URL is not my first option, I'm using the data-toggle attribute in the <a> link so there is no need to produce a URL hash.

Any insight? Here's an example of my markup:

<ul class="nav nav-list" id="sampleTabs">
    <li><a href="#example" data-toggle="tab">Tab 1</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade active in" id="example">
        Example Tab
    </div>
</div>

<script>
$('#sampleTabs a:first').tab('show');
</script>

I'm open to any suggestion - using a PHP session, JS cookie, etc.

Edit: This is the real issue. I have a pagination system using PHP, so when a page number or next/prev arrow is clicked, it will reload the page. This is why I need to find the active tab before loading the next page, since I"ll just pass it in the url or session, etc.

First of all you need to remove the data-toggle attribute. We will use some JQuery, so make sure you include it.

  <ul class='nav nav-tabs'>
    <li class='active'><a href='#home'>Home</a></li>
    <li><a href='#menu1'>Menu 1</a></li>
    <li><a href='#menu2'>Menu 2</a></li>
    <li><a href='#menu3'>Menu 3</a></li>
  </ul>

  <div class='tab-content'>
    <div id='home' class='tab-pane fade in active'>
      <h3>HOME</h3>
    <div id='menu1' class='tab-pane fade'>
      <h3>Menu 1</h3>
    </div>
    <div id='menu2' class='tab-pane fade'>
      <h3>Menu 2</h3>
    </div>
    <div id='menu3' class='tab-pane fade'>
      <h3>Menu 3</h3>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
// Handling data-toggle manually
    $('.nav-tabs a').click(function(){
        $(this).tab('show');
    });
// The on tab shown event
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
        alert('Hello from the other siiiiiide!');
        var current_tab = e.target;
        var previous_tab = e.relatedTarget;
    });
});
</script>

Here is the answer for those of you who need a Boostrap 3 solution.

In bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line

// tab
$('#rowTab a:first').tab('show');

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//show selected tab / active
 console.log ( $(e.target).attr('id') );
});