<script src="mari-tabs.js"></script><div class="tab-wrap">
<ul class="tabs-nav">
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
<li>
Tab 3
</li>
</ul>
<ul class="tabs-content">
<li class="active-content">
Content 1
</li>
<li>
Content 2
</li>
<li>
Content 3
</li>
</ul>
</div><script type="text/javascript">
$(document).ready(function() {
$('.mari-tabs-content').mariTabs({
nav: '.tabs-nav'
});
});
</script><html>
<head>
<title>Tabs</title>
</head>
<body>
<div class="tab-wrap">
<ul class="tabs-nav">
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
<li>
Tab 3
</li>
</ul>
<ul class="tabs-content">
<li class="active-content">
Content 1
</li>
<li>
Content 2
</li>
<li>
Content 3
</li>
</ul>
</div>
<script src="mari-tabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.mari-tabs-content').mariTabs({
nav: '.tabs-nav'
});
});
</script>
</body>
</html>In mariTabs you can add settings using the data-mari-tabs attribute. You still need to call $(element).mariTabs() to initialize mariTabs on the element.
Example:
<div data-mari-tabs='{"nav": ".tabs-nav"}'></div>| Option | Type | Default |
|---|---|---|
| nav | str | mari-tabs-nav |
// On trigger event
$('.mari-tabs-content').on('ml.shown.tab', function(e, index){
console.log(index);
});
$('.mari-tabs-content').on('ml.hidden.tab', function(e, index){
console.log(index);
});| Event | Params | Description |
|---|---|---|
| ml.shown.tab | event, index | After tab shown |
| ml.hidden.tab | event, index | After tab hidden |
// Goes to tab by index
$('.mari-tabs-content').mariTabs('goTo', 2);| Method | Argument | Description |
|---|---|---|
goTo |
index : int | Goes to tab by index |
Initialize with:
$('.mari-tabs-content').mariTabs({
nav: '.tabs-nav'
});Goes to tab by index:
$('.mari-tabs-content').mariTabs('goTo', 2);- Chrome
- Firefox
- Opera
- IE10/11
- jQuery 1.7
- Gsap