如何使以下代码与Foundation 6一起使用？我相信它目前在基金会5

Question

我想创建与此http://codepen.io/naneer/pen/EgAau非常相似的内容 但是我在基金会6复制它时遇到了麻烦。

HTML

<dl class="tabs" data-tab data-options="deep_linking: true">
 <dd class="top">
  <a href="#tabs-deeplink-1" data-reveal-id="wines">WINES 1</a>
 </dd>
 <dd class="top">
  <a href="#tabs-deeplink-2" data-reveal-id="wines">WINES 2</a>
 </dd>
</dl>
<div id="wines" class="reveal-modal" data-reveal>
 <dl class="tabs vertical" data-tab>
  <dd class>
   <a href="#tabs-deeplink-1">WINES 1</a>
  </dd>
  <dd class>
   <a href="#tabs-deeplink-2">WINES 2</a>
  </dd>
 </dl>
 <div class="tabs-content">
  <div class="content" id="tabs-deeplink-1">
    <p>First panel content goes here...</p>
  </div>
  <div class="content" id="tabs-deeplink-2">
    <p>Second panel content goes here...</p>
  </div>
</div>

CSS

.tabs dd.active a {
  background: #008CBA;
}

JS

$(document).foundation();

$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
 $(document).foundation('reflow');
 $('dd.top').removeClass('active');
});