Semantic Re-useable jQuery Tabs Plugin - Tabs

A tiny, easy-to-use jQuery tabs plugin which helps you implement multiple tabbed interfaces on your webpage.

How to use it:

1. Add references to jQuery library and the jQuery Tabs plugin's stylesheet & JS files.

<link rel="stylesheet" href="css/jquery.tabs.css">
  ...
<script src="jquery-1.11.3.min.js"></script>
<script type="src="js/jquery.tabs.js"></script>

2. Create a semantic tabbed interface as follow.

<tabs>
  <menu>
    <item>Tab 1</item>
    <item>Tab 2</item>
    <item>Tab 3</item>
    <item>Tab 4</item>
  </menu>
  <content>
    <panel>
      <h2>Panel 1</h2>
      Content 1
    </panel>
    <panel>
      <h2>Panel 2</h2>
      Content 2
    </panel>
    <panel>
      <h2>Panel 3</h2>
      Content 3
    </panel>
  <panel>
      <h2>Panel 4</h2>
      Content 4
    </panel>
  </content>
</tabs>

3. Initialize the tabs plugin.

$("tabs").tab();

4. Available plugin options.

// initial tab
iniciante: 1,  

// selector for tabbed navigation
menu: "menu", 

// selector for tabbed panels
abasConteudo: "panel", 

// selector for panel wrapper
conteudo: "content", 

// selector for main wrapper
principal: "tabs", 

// selector for navigaion items
itensMenu: "item",  

---

This awesome jQuery plugin is developed by renalcio. For more Advanced Usages, please check the demo page or visit the official website.