how to remain active tab when page refreshing in foundation framework

 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