Skeleton


Tabs

Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.

  • The tabs are clean and simple unordered-list markup and basic CSS.
  • The tabs are cross-browser, but don't need a ton of hacky CSS or markup.
  • The tabs work like a charm even on mobile devices.
Code Example
<!-- Standard <ul> with class of "tabs" -->
<ul class="tabs">
  <!-- Give href an ID value of corresponding "tabs-content" <li>'s -->
  <li><a class="active" href="#simple">Simple</a></li>
  <li><a href="#lightweight">Lightweight</a></li>
  <li><a href="#mobileFriendly">Mobile</a></li>
</ul>
 
<!-- Standard <ul> with class of "tabs-content" -->
<ul class="tabs-content">
  <!-- Give ID that matches HREF of above anchors -->
  <li class="active" id="simple">The tabs are clean and simple unordered-list markup and basic CSS.</li>
  <li id="lightweight">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
  <li id="mobileFriendly">The tabs work like a charm even on mobile devices.</li>
</ul>
 
<!-- NOTE: jQuery that fires the change is in tabs.js -->