使用ajax时，Foundation选项卡在模态中不起作用

Question

我在

处获取了基本标签html

http://foundation.zurb.com/docs/components/tabs.html

并将其用作Ajax响应。

在我的index.html中，我有以下内容：

<a href="ajax/endpoint" data-reveal-ajax="true" 
   class="button" data-reveal-id="myModal">Login</a>

<div id="myModal" class="reveal-modal" data-reveal>

</div>

模式出现了标签，但它们不起作用，我无法在标签之间切换。

任何可能出错的线索？

提前致谢。

Answer 1

我遇到了类似的问题。它是用按钮显示模态。我通过Ajax Request调用了按钮，当它们被点击时没有发生任何事情。

我使用jquery解决了我的问题，该jquery旨在在页面底部用于加载后激活对象。

$(document).foundation();

在HTML中放置responseText 后，只需即可使用此代码。而且你可以在标签之间切换。 希望这对你也有帮助。请提供有关结果的反馈。

Answer 2

我不确定您使用的是哪个版本的粉底？

在基础4中，它是部分，

如果您正在使用模态中的Sections，或者它们是通过AJAX加载的，或者在初始化Foundation时隐藏它们，则需要重新转换这些部分以使标签正确显示：

   $('#myModal').on('opened', function () {
   $(this).foundation('section', 'reflow');
   });

http://foundation.zurb.com/docs/v/4.3.2/components/section.html您将在此链接的底部看到上述注释。

我没有在基础5 doc http://foundation.zurb.com/docs/components/tabs.html

中看到关于此的任何注释

Answer 3

我有一个非常类似的问题，除了你在模态中显示标签的部分。 chinmayahd的回答帮助我解决了问题。

我在调用ajax时将$(document).foundation('reflow');放在success选项中，以便在页面加载后工作。像这样，

$.ajax({
    url : 'your/url/here',
    success : function(data) {               // data holding HTML markup of tabs
        $('div#content').html(data);         // tabs are displayed here
        $(document).foundation('reflow');    // perform foundation reflow
    }
});