Using of Jquery UI tabs or Jquery plugin is not a bad deal but they do increase the page loading time whereas my practice is to minimize the loading time as much as I can that is the reason I've developed simple animated tabs with a snippet of Jquery why don't you look at the demo below and then tutorial.
Jqueryis too simple and minimized so what the script says.
When the page will be loaded three events will be triggered.
- All div inside class='content-canvas' will be hide.
- The first div inside the class='content-canvas' will be show.
- The first button will have the class='active'
$('.tab-button').find('span').removeClass('active');All the buttons having the class='active' will be removed and then the var currentclass will calculate the class of the clicked button.After that the clicked button will have the class='active'.
classof the clicked button,the condition will be applied on each content.That is if any of the content container have the
classwhich is equals to the
currentclasswill be show others will be
Holla Done,if you didn't got anything our comments are always open.