Welcome to Designer Blog here i have posted how to remain active tab when page refreshing in
foundation framework
Step1:
In case your in Tab 2. when you refreshing or reload page it will goes to Tab1 as the default
position.
Step2:
To redirect or stop going to menu Tab 1. we are going to use the property called
data-options="deep_linking: true". which makes selected tab active when we refresh or reload
the Page
Step3:
Default Foundation framework html structure . you have to add
data-options="deep_linking: true" in
<ul class="tabs" data-tab data-options="deep_linking: true">
Html Code:
<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>
Step4:
Enjoy Folks
