问如何在我的javascript中使用4节(选项卡)？

EN

 <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>

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
        });

    });

  $("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");
}