Tabs 扩展LeftAndMain并添加选项卡

我在尝试让标签在我的LeftAndMain扩展中正常工作

我找不到任何关于如何实现这一点的文档，所以我只是查看管理面板中的“设置”选项卡设置

正如我所说，远射：p

这使它们以选项卡的形式漂亮地显示，但是由于JS错误，功能之间的切换不起作用：

js:551未捕获错误：jquery UI选项卡：不匹配的片段标识符

/mymodule/templates/MyAdmin\u Content.ss

<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
    <div class="cms-content-header north">
        <div class="cms-content-header-info">
            <% include CMSBreadcrumbs %>
        </div>

        <div class="cms-content-header-tabs cms-tabset-nav-primary ss-ui-tabs-nav ss-tabset">
            <ul class="cms-tabset-nav-primary ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
                role="tablist">

                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0"
                    aria-controls="Root_Servers" aria-labelledby="ui-id-1" aria-selected="true"><a
                        href="#Root_Servers" class="ui-tabs-anchor" role="presentation"
                        tabindex="-1">Main</a></li>

                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="Root_Settings"
                    aria-labelledby="ui-id-2" aria-selected="false"><a
                        href="#Root_Settings" class="ui-tabs-anchor"
                        role="presentation" tabindex="-1" id="ui-id-2">Access</a></li>

            </ul>
        </div>
    </div>

    <div class="cms-content-fields cms-panel-padded center">
        <fieldset>
            <div id="Root" class="field CompositeField tabset">
                <div id="Root_Servers" class="tab  ui-tabs-panel ui-widget-content ui-corner-bottom"
                     aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false"
                     style="display: none;">
                    TAB 1
                </div>
                <div id="Root_Settings" class="tab  ui-tabs-panel ui-widget-content ui-corner-bottom"
                     aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true"
                     style="display: block;">
                    TAB 2
                </div>
            </div>
        </fieldset>
    </div>

    <div class="cms-content-actions cms-content-controls south text-center">
        Footer
    </div>
</div>

表1
表2
页脚

我知道大多数选项卡类都是由jQueryUI添加的，但是我还没有发现这些选项卡是如何被实例化的，以便删除最初不需要的内容

我希望只访问

updateCMSFields（）

，但

LeftAndMain

---

希望得到一个指针，谢谢你的老问题，但我也被困在这个问题上了

选项卡和选项卡式内容需要位于同一个“选项卡”容器中。对于Silverstripe，该容器是

.cms选项卡集

，因此将该类上移到顶部的

.cms content

div即可实现这一点。以下是问题中修改后的代码（修剪了一些fat以使其更清晰）：

表1内容
表2内容

---

您能分享一下将扩展添加到LeftAndMain的代码吗？为什么会有人否决这个：/

<!-- Add .cms-tabset class here -->
<div class="cms-content center cms-tabset $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content" data-ignore-tab-state="true">

<!-- Start north -->
<div class="cms-content-header north">
    <div class="cms-content-header-info">
        <% include CMSBreadcrumbs %>
    </div>

    <div class="cms-content-header-tabs cms-tabset-nav-primary ss-ui-tabs-nav">
        <ul class="cms-tabset-nav-primary">
            <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
                <a href="#Root_Servers" class="ui-tabs-anchor" role="presentation" tabindex="-1">
                    Testing
                </a>
            </li>
            <li class="ui-state-default ui-corner-top">
                <a href="#Root_Settings" class="ui-tabs-anchor" role="presentation" tabindex="-1">
                    Settings
                </a>
            </li>
        </ul>
    </div>
<!-- End north -->
</div>

<!-- Start center -->
<div class="cms-content-fields cms-panel-padded center">
    <div id="Root" class="field CompositeField tabset">
        <div id="Root_Servers" class="tab  ui-tabs-panel ui-widget-content ui-corner-bottom">
            TAB 1 Content
        </div>
        <div id="Root_Settings" class="tab  ui-tabs-panel ui-widget-content ui-corner-bottom">
            TAB 2 Content
        </div>
    </div>
<!-- End center -->
</div>