title: Load content on tab selected (Foundation)
body: <p>I am using Zurb Foundation 6 Tabs.  I have a javascript question. Here is my html for a 3 tab layout. </p>
  
  <pre><code>&lt;ul class="tabs" data-tabs id="myTabs"&gt;     
      &lt;li class="tabs-title is-active"&gt;&lt;a href="#panel1" aria-selected="true"&gt;Tab 1 Info&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tabs-title" &gt;&lt;a href="#panel2"&gt;Tab 2 Info&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tabs-title" &gt;&lt;a href="#panel3"&gt;Tab 3 Info&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tabs-content" data-tabs-content="myTabs"&gt;
      &lt;div class="tabs-panel is-active" id="panel1"&gt;
      ....
      &lt;/div&gt;
      &lt;div class="tabs-panel" id="panel2"&gt;
      ....
      &lt;/div&gt;
      &lt;div class="tabs-panel" id="panel3"&gt;
      ....
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The tabs work great! However, I want to load content into Tab 3 only when clicked.  I will be using ajax to load the content.  Foundation 6 docs provide a javascript event that fires when ANY tab is clicked on.  See below:</p>
  
  <pre><code> $('#myTabs').on('change.zf.tabs', function() {
        console.log('Those tabs sure did change!');
   });
  </code></pre>
  
  <p>I need an event to fire ONLY when panel3 is selected. How to do?</p>