Zurb foundation for sites v6 选项卡不起作用

Question

我在我的项目中使用 Zurb foundation for sites v6。我有一个带有选项卡的页面，我可以在其中动态创建选项卡和选项卡内容。

<div class="row woocommerce-tabs">
    <div class="large-12 columns">
        <ul class="tabs" data-tabs id="product-description-tabs">
            <?php foreach ( $tabs as $key => $tab ) : ?>
                <li class="tabs-title">
                    <a href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></a>
                </li>
            <?php endforeach; ?>
        </ul>
      <div class="tabs-content" data-tabs-content="product-description-tabs">
            <?php foreach ( $tabs as $key => $tab ) : ?>
                <div class="tabs-panel" id="tab-<?php echo esc_attr( $key ); ?>">
                    <?php call_user_func( $tab['callback'], $key, $tab ); ?>
                </div>
            <?php endforeach; ?>
      </div>
   </div>
</div>

我是这样发起基金会的：

<script>
  $(document).foundation();
</script>

但问题是，当创建选项卡并且我想打开某个选项卡时，例如当我有两个选项卡时，它只是将新打开的第二个选项卡中的内容添加到第一个选项卡的内容中。控制台中没有错误，我不确定为什么会这样？我也在同一页面上使用了 foundation off-canvas 并且工作完全正常，只是选项卡没有按预期工作。

Answer 1

我猜（我对 PHP 没那么热）因为标签内容是动态添加的，$(document).foundation(); 在标签本身有之前运行ning已创建（因为它将运行首次加载页面时）。如果我的假设是正确的，那么您可以：

重新初始化（如果您要用新内容更新现有的一组选项卡）：

Foundation.reInit('tabs'); // generally for all .tabs

或

Foundation.reInit($('#product-description-tabs')); // for that one id

创建后初始化（如果这是一组新的选项卡）

$('[data-tabs]').foundation(); // Initialise all tabs

或

$('#product-description-tabs').foundation(); // Initialise this set of tabs

但这必须在您将选项卡 HTML 加载到 DOM 后执行，否则它实际上不会执行任何操作。

Zurb foundation for sites v6 选项卡不起作用

Zurb foundation for sites v6 tabs not working

javascript

css

tabs

zurb-foundation