如何使用ZURB基金会4个部分（选项卡）与我的JavaScript AJAX？ 我正在使用ZURB基金会4.1.5作为我的应用程序，我正试图使用ZURB部分JavaScript来管理页面上的“标签”。但是，我的页面上的选项卡中的数据是动态的，由Ajax调用加载。我需要知道如何在内容部分渲染或绘制这些数据

我的javascript方法

a） 无论何时选择选项卡，都需要得到通知

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

---

c） 动态设置每个选项卡的HTML内容：我有一个小胡子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>

---

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

<dl class="tabs" id="clientTabs" data-tab>
    <dd class="active">
        <a id="GeneralInformationTab" href="#GeneralInformationTab">
            General Information
        </a>
    </dd>
    <dd>
        <a id="ContactDetailsTab" href="#ContactDetailsTab">
            Contact Details
        </a>
    </dd>
</dl>
<div class="tabs-content">
    <div class="content active" id="tabContent">
        <p>First panel content goes here...</p>
    </div>
</div>

它动态加载每个选项卡的内容，在load（）中建立一个请求URL，以获取部分视图。我很快会尝试使用表单和回发，如果需要，我会更新这个答案

这对我来说是很新的，所以我承认这可能不是一个完美的解决方案。请通过评论提出任何改进，我会更新我的答案

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

<dl class="tabs" id="clientTabs" data-tab>
    <dd class="active">
        <a id="GeneralInformationTab" href="#GeneralInformationTab">
            General Information
        </a>
    </dd>
    <dd>
        <a id="ContactDetailsTab" href="#ContactDetailsTab">
            Contact Details
        </a>
    </dd>
</dl>
<div class="tabs-content">
    <div class="content active" id="tabContent">
        <p>First panel content goes here...</p>
    </div>
</div>

<script>
    $('#clientTabs').on('toggled', function (event, tab) {
        var currentTab = tab.context.id;        
        $('#tabContent').empty();
        $('#tabContent').load('/Home/' + currentTab);
    });
</script>

public ActionResult GeneralInformationTab()
{
    return PartialView("Partials/GeneralInformation");
}

public ActionResult ContactDetailsTab()
{
    return PartialView("Partials/ContactDetails");
}