javascript - 如何将 Zurb Foundation 4 部分(选项卡)与我的 javascript Ajax 一起使用？

Question

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

我的javascript方法

a) 需要在选择标签时得到通知。

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

c) 为每个选项卡动态设置 HTML 内容:我有一个 mustache js 模板，它将与 jquery Ajax 回调的结果相结合以设置选项卡的 html。

Answer 1

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

这是部分/标签定义 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

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