Create Attractive jQuery Tab Module with Tabulous.js

Written by Kevin Liew on 05 Jul 2013
36,832 Views • Javascript

Tabulous.js is a great jQuery tab module. With its supports of animations while loading its tab content, I reckon you can use this plugin to create a cool website layout.

Imagine this, you use tabs as navigation menu, and load your website content with a few supported animation effect such as Scale, Slide left, Slide Right and Flip. Simple as that, you just create a good looking web layout with tabulous.js. Go ahead and see the demo, you need to play with it to understand what I meant.

Features

  • Easy to setup
  • Support animation effect - Scale/Slide Left/ Slide Right/ Flip
  • Lightweight

Screenshots

SPECIFICATIONS & DOWNLOAD

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

5 comments
Efren Martínez 11 years ago
Looks great! Thanks for share !!
Reply
Athen 11 years ago
button link not working in tab container..need some help..:(
Reply
Alex 11 years ago
Hi Athen,

it's possible via 'location.href'.
E.g.
<a href="#" onclick="javascript:location.href='http://www.xyz.de ';">linkname</a>
Reply
Chris 11 years ago
You can also add an class in your HTML:

<a class="class_name" href="#tabs-1" title="">Name</a>


and modify tabulous.js like

var links = this.$elem.find('a');
var firstchild = this.$elem.find('li:first-child').find('a');


to

var links = this.$elem.find('a.class_name');
var firstchild = this.$elem.find('li:first-child').find('a.class_name');


Now a "normal" link is working inside tabs_container
Reply
Vishal 10 years ago
Awesome, Finding solution from last 2 days , this one is works

Thank U..
Reply