JQuery Tabs

by aaronk85

HTML

<div id="club-tabs">
    <ul id="club-tabs-nav">
        <li><a class="jun" href="#jun">Juniors</a></li>
        <li><a class="snr" href="#snr">Seniors</a></li>
    </ul>
    <div id="club-tabs-content">
        <div id="jun" class="club-tabs">
<div class="weekly"><img width="996" height="83" border="0" usemap="#map" src="http://www-static.sportingpulse.com/files/builder/1_3351/juniors.jpg">

<map name="map">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36689&amp;c=1-3351-0-0-0" coords="7,4,58,73" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36698&amp;c=1-3351-0-0-0" coords="62,5,124,72" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36693&amp;c=1-3351-0-0-0" coords="128,6,208,72" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=82685&amp;c=1-3351-0-0-0" coords="210,6,260,71" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36687&amp;c=1-3351-0-0-0" coords="267,6,314,73" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=49437&amp;c=1-3351-0-0-0" coords="319,7,377,72" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36697&amp;c=1-3351-0-0-0" coords="381,7,423,70" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36706&amp;c=1-3351-0-0-0" coords="426,8,501,70" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36706&amp;c=1-3351-0-0-0" coords="507,9,577,71" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=82648&amp;c=1-3351-0-0-0" coords="581,9,630,71" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36685&amp;c=1-3351-0-0-0" coords="635,8,721,73" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36702&amp;c=1-3351-0-0-0" coords="727,9,806,72" shape="rect">
<area href="http://www.sportingpulse.com/club_info.cgi?clubID=36695&amp;c=1-3351-0-0-0"...

CSS

#club-tabs-nav {float:left;width:100%;}
#club-tabs-nav li {float:left;margin:0 10px;}
#club-tabs-content {float:left;width:100%;}

JavaScript

$(document).ready(function(){
  $( '#club-tabs-content .club-tabs:not(:first)' ).hide();
  $('#club-tabs-nav li').click(function(e) {
    $('#club-tabs-content .club-tabs').hide();
    $('#club-tabs-nav .current').removeClass("current");
    $(this).addClass('current');
    
    var clicked = $(this).find('a:first').attr('href');
    $('#club-tabs-content ' + clicked).fadeIn('slow');
    e.preventDefault();
  }).eq(0).addClass('current');

});