TabsThe "tabs" classes will convert an unordered list into a set of horizontal tabs. The implementor must create the content divs and programmatically show/hide the divs in response to use input, as well as programmatically move the fl-tabs-active class on the currently active tab. The examples on this page are not functional in that sense, and only show one content pane. Centered Tabs Wiki Markup |
---|
{html}
<div class="tabs-demos">
<div class="fl-container-600 fl-centered">
<ul class="fl-tabs">
<li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
<li><a href="#_bottom">Tab #2</a></li>
<li><a href="#_bottom">Tab #3</a></li>
</ul>
<div class="fl-tabs-content">
Content
</div>
</div>
</div>
{html} |
The mark-up and classes used to produce this layout: Code Block |
---|
|
<div class="fl-container-600 fl-centered">
<ul class="fl-tabs">
<li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
<li><a href="#_bottom">Tab #2</a></li>
<li><a href="#_bottom">Tab #3</a></li>
</ul>
<div class="fl-tabs-content">
Content
</div>
</div>
|
Left-Aligned Tabs Wiki Markup |
---|
{html}
<div class="tabs-demos">
<div class="fl-container-600 fl-centered">
<ul class="fl-tabs fl-tabs-left">
<li><a href="#_bottom">Tab #1</a></li>
<li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
<li><a href="#_bottom">Tab #3</a></li>
</ul>
<div class="fl-tabs-content">
Content
</div>
</div>
</div>
{html} |
The mark-up and classes used to produce this layout: Code Block |
---|
|
<div class="fl-container-600 fl-centered">
<ul class="fl-tabs fl-tabs-left">
<li><a href="#_bottom">Tab #1</a></li>
<li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
<li><a href="#_bottom">Tab #3</a></li>
</ul>
<div class="fl-tabs-content">
Content
</div>
</div>
|
Right-Aligned Tabs Wiki Markup | {html}
<div class="tabs-demos">
<div class="fl-container-600 fl-centered">
<ul class="fl-tabs fl-tabs-right">
<li><a href="#_bottom">Tab #1</a></li>
<li><a href="#_bottom">Tab #2</a></li>
<li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
</ul>
<div class="fl-tabs-content">
Content
</div>
</div>
</div>
{html}The mark-up and classes used to produce this layout: Code Block |
---|
|
<div class="fl-container-600 fl-centered">
<ul class="fl-tabs fl-tabs-right">
<li><a href="#_bottom">Tab #1</a></li>
<li><a href="#_bottom">Tab #2</a></li>
<li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
</ul>
<div class="fl-tabs-content">
Content
</div>
</div>
|
|