页面刷新后重新加载上一个活动选项卡(Bootstrap)

时间:2013-04-23 14:07:20

标签: jquery asp.net-mvc twitter-bootstrap tabs

我正在构建一个MVC应用程序,在我看来,我使用了bootstrap选项卡。现在,我想要的是刷新页面或从控制器重定向到它后重新加载最后一个活动选项卡。有关如何以最简单的方式执行此操作的任何帮助? 这是我的代码:

<div id="tabs">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#Stages" data-toggle="tab">Stages</a>
        </li>
        <li>
            <a href="#Activities" data-toggle="tab">Activities</a>
        </li>
        <li>
            <a href="#History" data-toggle="tab">History</a>
        </li>       
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="Stages">                
            @Html.Partial("_Stages", Model.stages)
        </div>
        <div class="tab-pane" id="Activities">
            @Html.Partial("_Activities", Model.activities)
        </div>
        <div class="tab-pane" id="History">
            @Html.Partial("_History", Model.history)
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

  1. 尝试检查客户端location.href.hash并相应地操作标签选择。

  2. 否则,您必须使用某些导航/历史记录客户端库,例如nav.jssammy.js。这可以使用散列路径在浏览器历史堆栈中注册选项卡单击。使用URL哈希,您可以操作选项卡选择

  3. 您可以参考Sammy Implementation

答案 1 :(得分:0)

TwitterBootstrapMVC 允许通过扩展方式传递有效标签号:

using (var tabs = Html.Bootstrap().Begin(new Tabs("TabsId").ActiveTab(2)))
{
    @tabs.Tab("Tab 1")
    @tabs.Tab("Tab 2")
    @tabs.Tab("Tab 3")

    using (tabs.BeginPanel())
    {
        <p>Contents of tab 1</p>
    }
    using (tabs.BeginPanel())
    {
        <p>Contents of tab 2</p>
    }
    using (tabs.BeginPanel())
    {
        <p>Contents of tab 3</p>
    }
}

因此,如果您的模型中有关于您要使用的标签的信息,则可以使用该标签。