JQuery plugin to render Tabs and navigation content by applying it to div.
at first we must add references to "htabs.js" and "htabs.css" as below.
<script type="text/javascript" src="scripts/htabs.js"></script>
<link href='styles/HTabs.css' rel='stylesheet' type='text/css' />
HTML is as simple as having a container div contains an un-ordered list, and another div with the class 'tabs_container' contains content divs with the class 'htabs-cont' as below.
to set selected tab add class 'htabs-selec' to the anchor element.
<div id='tabDiv' style="width: 400px">
<ul>
<li><a href="#exp1" class='htabs-selec'>tab1</a></li>
<li><a href="#exp2">tab2</a></li>
<li><a href="#exp3">tab3</a></li>
<li><a href="#exp4">tab4</a></li>
</ul>
<div id="tabs_container" class='htabs-container'>
<div id='exp1' class='htabs-cont'>
content tab 1
</div>
<div id='exp2' class='htabs-cont'>
content tab 2
</div>
<div id='exp3' class='htabs-cont'>
content tab 3
</div>
<div id='exp4' class='htabs-cont'>
content tab 4
</div>
</div>
</div>
###Javascript
the javascript is as below
$('#tabDiv').HTabs();
the plugin is provided with options as below
$('#tabDiv').HTabs({
slideSpeed: 600,
hoverClass: "hoverTest",
tabClass: "defaultTest",
selectedTabClass: "selectedTest",
contentFixedHeight: true,
contentHeight: '150px'
});
###CSS
the css is included in the plugin, and a default style is provided. you can always change the style by passing three main css classes like the optiones provided in the js example above.
a demo hosted in http://hdahamsheh.github.io/HTabs-js of two tabs; one is default and another applying custom options.