To init:
$('#tabs').tabbie();
or
$('#tabs').tabbie({event:'click'});
to change the event listener to click
,the default is mouseover
.
HTML part is just like this:
<ul id="tabs">
<li class="active"><a rel="tab1" href="http://foobar.me">foobar.me</a></li>
</ul>
<div id="tab1" class="content">
<h2>tab1</h2>
tab1
</div>
Use the rel
attribute in the <a>
tag to setup the relationship. Just like tab1
in the code above.
class="active"
in <li>
is used to identify which tab to displays.
To use the default eventListener mouseover
, then you can do something with the href
or some javascript to capture click
event.
See demo here:Tabbie Demo