jqueryAir2 - Tabs

HTML

<h2>Select a Flight</h2>
<section id="tabs">
    <ul>
        <li><a href="#2013_04_20" data-flights="5">Apr 20</a></li>
        <li><a href="#2013-03-20" data-flights="8">Mar 20</a></li>
        <li><a href="#2013-02-20" data-flights="6">Feb 20</a></li>
        <li><a href="#2013-01-20" data-flights="4">Jan 20</a></li>
        <li><a href="#2013-01-02" data-flights="6">Jan 2</a></li>
    </ul>
    
    <div id="2013_04_20">#2013-01-02 content</div>
    <div id="2013-03-20">#2013-03-20 content</div>
    <div id="2013-02-20">#2013-02-20 content</div>
    <div id="2013-01-20">#2013-01-20 content</div>
    <div id="2013-01-02">#2013-01-02 content</div>
</section>

CSS

body { font-family: Tahoma;}
h2 { display:block; background: #CFB984; padding: 10px; font-size:14px; color: #333;-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px; margin:0;}

#tabs { border: 1px solid #F6DEBC;-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;}
#tabs > ul { display:table; margin:0 0 10px; padding:0; list-style-type:none; background:#F49371; width: 100%; position:relative;}
#tabs > ul li { display: table-cell; text-align: center; border-bottom: 1px dashed rgba(190,202,205, 0.9);}
#tabs > ul li a {font-size:14px; color: #FFF; text-decoration: none; text-shadow: 1px 1px rgba(190,202,205, 0.8); display: block; padding: 10px;}
.active { background: rgba(246,222,188, 0.9); border-top: 1px solid #E9D61E;}
#tabs > ul li a:hover {background-color: #F6DEBC; border-top: 1px solid #E9D61E;}
.tooltip { display: block; background: rgb(67,183,202); border-radius: 5px; padding: 5px 7px; position: absolute; top: -20px;}
.tooltip i {display:block; position:absolute; bottom:-5px; width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;	
	border-top: 5px solid rgb(67,183,202);}

JavaScript

//       $("#tabs ul li a").on("click", function(e){
//          e.preventDefault();
//           $("#tabs ul li a.active").removeClass("active");
//           $(this).addClass("active");
//      });

jQuery(function($){
    $("#tabs > div").hide();
    function changeTab(e){
        e.preventDefault();
        $("#tabs ul li a.active").removeClass("active").bind("click", changeTab);
        $(this).addClass("active").unbind("click", changeTab);
        var activeDiv = $(this).attr("href");
        showDivs(activeDiv);
    }
    
    function showNumFlights(e) {
        var num_flights = $(this).data("flights");
        $(this).append("<span class='tooltip'>" + num_flights + " flights <i></i></span>");
    }
   
    
    function showDivs(activediv) {
        $("#tabs > div").hide();
        $(activediv).fadeIn(200);
    }
    $("#tabs ul li a").eq(0).addClass("active");
    $("#tabs ul li a").bind({
        click: changeTab,
        mouseenter: showNumFlights,
        mouseleave: hideNumFlights
    });
});