Basic Semantic Tabs Plugin With jQuery - saTabs.js

saTabs.js is a very small jQuery plugin to generate tabs from an unordered list which links to a collection of content sections within the document.

More features:

• 2 animations: slide and fade.
• Supports hash change event.
• Easy to style.
• Simple to implement.

How to use it:

1. Create anchor links in the 'data-tabscrollnavcontainer'. If we pass a type in here, we can control the method of change. Right now we can do fade, slide and none.

<ul data-tabscrollnavcontainer="fade">
  <li>
      <a href="#one">Section One</a>
  </li>
  <li>
      <a href="#two">Second Section</a>
  </li>
  <li>
      <a href="#three">Number Three Section</a>
  </li>
  <li>
      <a href="#four">4th section</a>
  </li>               
</ul>

2. Create your own content sections section that have the same ID as the anchor tags we created.

<article>
  <section id="one">
      <h3>Section One</h3>
  </section>
  <section id="two">
      <h3>Second Section</h3>
  </section>
  <section id="three">
      <h3>Number Three Section</h3>
  </section>
  <section id="four">
      <h3>4th Section</h3>
  </section>
</article>

3. Initialize the saTabs.js. Done.

saTabs.init();

4. Style the tabs in the CSS as per your needs.

ul li {
  display: inline-block;
  background-color: black;
  padding: 1%;
}

ul {
  background-color: black;
  padding: 0;
}

a, a:visited, a:active, a:hover { color: white; }

.tabscroll_activeNavi {
  background-color: white;
  border-width: 2px 2px 0 2px;
  border-color: black;
  border-style: solid
}

.tabscroll_activeNavi a, .tabscroll_activeNavi a:visited, .tabscroll_activeNavi a:active, .tabscroll_activeNavi a:hover { color: black; }

article {
  margin: 0;
  padding: 0;
  border-width: 0 2px 2px 2px;
  border-color: black;
  border-style: solid
}

---

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