Tiny Reusable jQuery Tabs Plugin - Ublue Tabs

Ublue is an reusable, ultra-small and easy-to-customize jQuery tabs plugin that works both with mouse hover and mouse click events.

How to use it:

1. Create tab navigation and tab panels using unordered html lists.

<div class="tabs">
  <ul class="tabsTit">
    <li class="tabsTab tabsHover">Title1</li>
    <li class="tabsTab">Title2</li>
    <li class="tabsTab">Title3</li>
  </ul>
  <ul class="tabsCon">
    <li class="tabsList" readonly="true">Content1</li>
    <li class="tabsList">Content2</li>
    <li class="tabsList">Content3</li>
  </ul>
</div>

2. Load jQuery library along with the jQuery Ublue Tabs plugin at the end of your html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/Ublue-jQueryTabs-1.2.js"></script>

3. The default CSS styles for the tabs component.

.tabs {
  width: 400px;
  height: 160px;
  margin: 40px auto;
  border: 3px solid #333;
}

.tabsTit, .tabsCon { overflow: hidden; }

.tabsTit {
  text-align: center;
  color: #B3AAB4;
}

.tabsTit li {
  float: left;
  width: 100px;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  background: #262626;
  border-bottom: 2px solid #666666;
}

.tabsTit .tabsHover {
  background: #1E1E1E;
  border-bottom: 2px solid #A11E22;
}

.tabsCon {
  width: 400px;
  height: 130px;
  background: black;
  color: #B3AAB4;
}

.tabsCon li {
  width: 380px;
  height: 110px;
  padding: 10px;
}

4. Initialize the plugin and done.

$(".tabs").UblueTabs();

5. The default configuration options.

$(".tabs").UblueTabs({

  // CSS classes
  tabsTit:".tabsTit",
  tabsTab:".tabsTab",
  tabsCon:".tabsCon",
  tabsList:".tabsList",
  tabsHover:"tabsHover",

  // 'hover' or 'click'
  eventType:"hover"
  
});

---

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