Zurb基础站点v6选项卡不起作用-Java 学习之路

我在我的项目中使用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>

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

1 回答

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

Reinitialise (if you are updating an existing set of tabs with new content):
```
Foundation.reInit('tabs'); // generally for all .tabs
```
要么
```
Foundation.reInit($('#product-description-tabs')); // for that one id
```
Initialise after creation (If this is a new set of tabs)
```
$('[data-tabs]').foundation(); // Initialise all tabs
```
要么
```
$('#product-description-tabs').foundation(); // Initialise this set of tabs
```
但是，一旦将选项卡HTML加载到DOM中，就必须执行此操作，否则它实际上不会执行任何操作 .
回复于 2024-05-04T06:06:05+08:00

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

1 回答

相关问题