Menu icon Foundation
How do I refresh the current tab instead of going to main tab??

Ok so I found this answer (specifically where she asks Question 2) but I need more detailed instructions -

http://foundation.zurb.com/forum/posts/3078-tabs-url-and-page-reload

I'm not sure where to put this property "data-options="deep_linking:true" in the html ( I am guesssing) or whatever property is needed to refresh the current tab insted of going to the main "content active" tab.

I don't have any js written for this either. Which js do I use?

The tabs work and I have separate content on each, I just want to fix the reload issue.

My code minus all the content for each tab is below.

Thanks.

            
      <div id="all_tabs">

              <ul class="tabs" data-tab> 
                <li class="tab-title active"><a href="#panel2-1">Tab-1</a></li> 
                <li class=" tab-title title2"><a href="#panel2-2">Tab2</a></li> 
                <li class="tab-title title3"><a href="#panel2-3">Tab-3</a></li> 
              </ul> 



          <div class="tabs-content"> 
               <div class="content active" id="panel2-1">
               ////All the panel 1 stuff
                </div> 
               
               
               
    <div class="content" id="panel2-2">
    ////All the panel 2 stuff
     </div>
    
    
    
    
               
    <div class="content" id="panel2-3">
    ////All the panel 3 stuff
    </div>
    
    </div>
    

tabs refresh reload jquery

Ok so I found this answer (specifically where she asks Question 2) but I need more detailed instructions -

http://foundation.zurb.com/forum/posts/3078-tabs-url-and-page-reload

I'm not sure where to put this property "data-options="deep_linking:true" in the html ( I am guesssing) or whatever property is needed to refresh the current tab insted of going to the main "content active" tab.

I don't have any js written for this either. Which js do I use?

The tabs work and I have separate content on each, I just want to fix the reload issue.

My code minus all the content for each tab is below.

Thanks.

            
      <div id="all_tabs">

              <ul class="tabs" data-tab> 
                <li class="tab-title active"><a href="#panel2-1">Tab-1</a></li> 
                <li class=" tab-title title2"><a href="#panel2-2">Tab2</a></li> 
                <li class="tab-title title3"><a href="#panel2-3">Tab-3</a></li> 
              </ul> 



          <div class="tabs-content"> 
               <div class="content active" id="panel2-1">
               ////All the panel 1 stuff
                </div> 
               
               
               
    <div class="content" id="panel2-2">
    ////All the panel 2 stuff
     </div>
    
    
    
    
               
    <div class="content" id="panel2-3">
    ////All the panel 3 stuff
    </div>
    
    </div>
    
Lyn about 5 years ago

Hey there,

Here is how you should do it using your code :

<div id="all_tabs">
    <ul class="tabs" data-tab data-options="deep_linking: true">
        <li class="tab-title active"><a href="#panel2-1">Tab-1</a></li> 
        <li class="tab-title title2"><a href="#panel2-2">Tab-2</a></li> 
        <li class="tab-title title3"><a href="#panel2-3">Tab-3</a></li> 
    </ul> 

    <div class="tabs-content"> 
        <div class="content active" id="panel2-1">
            ////All the panel 1 stuff
        </div> 
        <div class="content" id="panel2-2">
            ////All the panel 2 stuff
        </div>
        <div class="content" id="panel2-3">
            ////All the panel 3 stuff
        </div>
    </div>
</div>

Kind regards,

Lyn.

annearchy about 5 years ago

Hi Lyn,

I added in" data-options="deep_linking: true"> but when refreshing the second and third it still goes back to the main tab.

Do I need to add javascript? I tried something like this (with changed id's) and it wouldn't work either :(.

http://foundation.zurb.com/forum/posts/11356-foundation-tabs-when-i-refresh.

Otherwise the tabs are functioning normally.

annearchy about 5 years ago

Sorry something was off it's fixed now thank you Lyn!