Question

我在我的项目中使用Zurb基础站点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>

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

Answer 1

我猜（我在PHP上并不热衷）因为正在动态添加选项卡内容，$(document).foundation();在创建选项卡本身之前运行（因为它将在页面运行时运行）先加载）。如果我的假设是正确的那么你可以：

重新初始化（如果您要使用新内容更新现有标签集）：

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

OR

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

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

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

OR

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

但是，一旦将标签HTML加载到DOM中，就必须执行此操作，否则它实际上不会执行任何操作。

Zurb基础站点v6选项卡不起作用

1 个答案: