2

我有一个应用程序，我在其中使用 Bootstrap nag-tabs 来获取一些相互关联的内容。我正在努力做到这一点，以便在热重载出现时重新选择最后一个选定的选项卡。我也试图做到这一点，以便在用户导航离开后返回页面时重新选择最后选择的选项卡。这是模板：

<template name='admin'>
    <ul id='adminTabs' class='nav nav-tabs'>
        {{#if isInRole 'admin'}}
        <li class='active'><a href='#districtstab' data-toggle='tab'>Districts</a></li>
        {{/if}}

        {{#if isInRole 'admin, manage-users'}}
        <li><a href='#usertab' data-toggle='tab'>Users</a></li>
        {{/if}}

        {{#if isInRole 'admin, manage-schools'}}
        <li><a href='#schoolstab' data-toggle='tab'>Schools</a></li>
        {{/if}}

        {{#if isInRole 'admin, manage-classes'}}
        <li><a href='#classestab' data-toggle='tab'>Classes</a></li>
        {{/if}}

        {{#if isInRole 'admin, manage-lessons'}}
        <li><a href='#lessonstab' data-toggle='tab'>Lessons</a></li>
        {{/if}}

        {{>onlineuserstab}}

    </ul>
    <div class='tab-content'>
        {{#if isInRole 'admin'}}
        {{#isolate}}
        <div class='tab-pane active' id='districtstab'>
        {{>districts}}
        </div>
        {{/isolate}}
        {{/if}}

        {{#if isInRole 'admin, manage-users'}}
        {{#isolate}}
        <div class='tab-pane' id='usertab'>
        {{>users}}
        </div>
        {{/isolate}}
        {{/if}}

        {{#if isInRole 'admin, manage-schools'}}
        {{#isolate}}    
        <div class='tab-pane' id='schoolstab'>
        {{>schools}}
        </div>
        {{/isolate}}
        {{/if}}

        {{#if isInRole 'admin, manage-classes'}}
        {{#isolate}}
        <div class='tab-pane' id='classestab'>
        {{>classesTemplate}}
        </div>
        {{/isolate}}
        {{/if}}

        {{#if isInRole 'admin, manage-lessons'}}
        {{#isolate}}
        <div class='tab-pane' id='lessonstab'>
            {{>lessons}}
        </div>
        {{/isolate}}
        {{/if}}

        <div class='tab-pane' id='onlinetab'>
        {{#isolate}}
        {{>onlineusers}}
        {{/isolate}}
        </div>

    </div>
</template>

我怎样才能轻松完成我所追求的？

4

1 回答 1

1

假设哈希正在被使用，并且您有一个类似的 URL /#classestab，您可以在模板渲染上检查 URL 中的哈希并选择相关选项卡：

Template.admin.rendered = function() {
  if (window.location.hash)
    $('a[href="' + window.location.hash + '"]').tab('show');
}
于 2013-07-15T04:21:40.143 回答