There are two available types of tabs.
Tabs – type 1
Tabs – type 2
Tab type can be switched by changing the type class name to the following:
- ct-tabs–type1
- ct-tabs–type2
For both types the rest of HTML markup is the same:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div role="tabpanel" class="ct-tabs ct-tabs--type1"> <!-- Nav tabs --> <ul class="nav nav-tabs ct-tabs-nav" role="tablist" id="productGuide"> <li role="presentation" class="active"><a href="#vegetables" aria-controls="vegetables" role="tab" data-toggle="tab">Vegetables</a></li> <li role="presentation"><a href="#fruits" aria-controls="fruits" role="tab" data-toggle="tab">Fruits</a></li> <li role="presentation"><a href="#greens" aria-controls="greens" role="tab" data-toggle="tab">Greens</a></li> </ul> <!-- Tab panes --> <div class="tab-content ct-tabs-content"> <div role="tabpanel" class="tab-pane active ct-tabs-panel" id="vegetables"> [content] </div> <div role="tabpanel" class="tab-pane ct-tabs-panel" id="fruits"> [content] </div> <div role="tabpanel" class="tab-pane ct-tabs-panel" id="greens"> [content] </div> </div> </div> |