Refresh by clicking on the tab (Foundation)

Question

I need to refresh the content by clicking on aba. This refresh will have to be done in the Content 2 tab. Can anyone help me.

<div class="row">
    <div class="medium-12 columns">
            <ul class="tabs" data-tabs id="example-tabs">
                <li class="tabs-title is-active">
                    <a href="#panel1" aria-selected="true">Conteúdo 1</a></li>
                <li class="tabs-title"><a href="#panel2">Conteúdo 2</a></li>                          
            </ul>
            <div class="tabs-content" data-tabs-content="example-tabs">
                <div class="tabs-panel is-active" id="panel1">
                    Conteudo1
                </div>
                <div class="tabs-panel" id="panel2">
                    Conteudo2
                </div>                
            </div>
        </div>
</div>

Answer 1

You can use the function load jQuery, targeting the same page and the div. Probably will match with ajax where will bring the new content.

HTML

<div class="tabs-panel" id="panel2">
  Conteudo2
</div>

Javascript

$('#panel2').click(function(){
  // faca algo antes
  $('#panel2').load(document.URL +  ' #panel2'); // recarrega a div
});

Foudation uses jQuery, so you can actually use load.