Question

我有一个应用程序，我正在使用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>

如何轻松完成我的目标？

Answer 1

假设哈希值已被使用，并且您有一个类似/#classestab的网址，您只需在模板渲染中检查网址中的哈希值，然后选择相关标签：

Template.admin.rendered = function() {
  if (window.location.hash)
    $('a[href="' + window.location.hash + '"]').tab('show');
}

Bootstrap Tabs＆amp;流星

1 个答案: