Basic jQuery Tabs Plugin With Hashtag Support - tabscroll.js

tabscroll.js is a simple, plain, lightweight jQuery tabs plugin which allows the user to open specific tab with hash links.

How to use it:

1. Add the 'data-tabscrollnavcontainer' attribute to the tab-navigation that contains hash links pointing to the content sections:

<ul data-tabscrollnavcontainer>
  <li>
    <a href="#one">Section One</a>
  </li>
  <li>
    <a href="#two">Second Section</a>
  </li>
  <li>
    <a href="#three">Third Section</a>
  </li>
  ...
</ul>

2. Create the tabbed content sections as follow:

<article>
  <section id="one">
    <h3>Section One</h3>
  </section>
  <section id="two">
    <h3>Second Two</h3>
  </section>
  <section id="three">
    <h3>Section Three</h3>
  </section>
  ...
</article>

3. The jQuery tabscroll.js should be loaded after jQuery library:

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="tabscroll.js"></script>

4. Style the tabs in the CSS:

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.