如何将 Zurb Foundation 4 部分（选项卡）与我的 javascript Ajax 结合使用？

我在我的应用程序中使用 Zurb Foundation 4.1.5，并尝试使用 Zurb Section Javascript 来管理页面上的“选项卡”。但是，我的页面选项卡中的数据是动态的，并由 Ajax 调用加载。我需要知道如何在部分内容上呈现或绘制这些数据。

我的 JavaScript 方法

a) 每当选择选项卡时都需要收到通知。

b) 需要能够以编程方式显示或选择活动选项卡

c）动态设置每个选项卡的HTML内容：我有一个mustache js模板，它将结合jquery Ajax回调的结果来设置选项卡的html。

记录我的解决方案，因为我在其他地方找不到记录这种方法。

这是部分/选项卡定义 html

 <div class="section-container auto" data-section>
            <section>
                <p class="title" data-section-title><a href="#p1">Section 1</a></p>
                <div class="content" data-section-content>
                    <p>Content of section 1.</p>
                </div>
            </section>
            <section>
                <p class="title" data-section-title><a href="#p2">Section 2</a></p>
                <div class="content" data-section-content>
                    <p>Content of section 2.</p>
                </div>
            </section>
        </div>

以下代码用于添加用于选项卡选择的 JavaScript 事件处理程序

script>
    $(document).foundation();
</script>
<script type="text/javascript">

    $(document).ready(function() {
            $("a[href='#p1']").bind("click", function(){
                alert(" panel 1"); //panel 1 is about to be opened by user
        });

        $("a[href='#p2']").bind("click", function(){
            alert(" panel 2"); // panel 2 is about to be opened
        });

    });

另请注意，选项卡面板或部分可以通过您的 JavaScript 传递点击事件来打开，如下所示：

  $("a[href='#p2']").click(); // this open tab p2

请注意Gotcha：第一次加载页面时，默认显示第一个选项卡，并且不会调用第一个选项卡的处理程序；如果您计划为选项卡 1（本例中为面板 1）加载 ajax 数据，则不能这样做。