Horizontal Tabs
This is my hands-on experience with the Tabs elements in ZURB Foundation 5.0
I am using the Feeling Responsive template, v1.9, so first I had to open <file: ../_sass/_04_settings_global.scss> and uncomment the section with the tabs (// 31. Tabs).
Then I edited <file: ../assets/css/styles_feeling_responsive.scss> by adding the following line
@import "foundation-components/tabs";
Then I copied the following HTML code as part of the contents of that Posts
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2">Tab 2</a></li>
<li class="tab-title"><a href="#panel3">Tab 3</a></li>
<li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
<div class="content" id="panel4">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
Now, I have the Tabs rendered with the scss code but I cannot bind the callbacks in my tabs. I have tried to add the following according to instructions at ZURB Foundation.
Callback Function
<script>
$(document).foundation({
tab: {
callback : function (tab) {
console.log(tab);
}
}
});
</script>
or
Toggled Event
<script>
$('#myTabs').on('toggled', function (event, tab) {
console.log(tab);
});
</script>
I have tried to add the <script>....</script> in the <head>...</head> section
or before </body> But I have not succeeded in making it work…. any ideas why this is happening ?