javascript - 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(); 在选项卡本身之前运行已创建(因为它将在页面首次加载时运行)。如果我的假设是正确的，那么您可以:

重新初始化(如果您要用新内容更新现有的一组选项卡):

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 中后执行，否则它实际上不会执行任何操作。