javascript - 如何使用 bootstrap 3 记住并保持事件的导航选项卡？ (如果重要的话，Asp Mvc 5)

Question

使用 bootstrap 3 我正在尝试这个例子。它按预期工作正常，显示页面时第一个选项卡处于事件状态。但是，当我导航到我的应用程序中的其他页面，然后返回此页面时，它会忘记事件选项卡，始终第一个选项卡是事件的。

我想让页面记住什么是事件标签。

到目前为止我尝试了什么: 我试图将 li 元素中的 class="active"和 div 元素中的 class="in active"部分保留下来。不幸的是，这种情况下根本没有显示任何选项卡，用户必须明确单击导航才能显示任何选项卡，因此这似乎不是解决方案。

提前致谢。

<ul class="nav nav-tabs">
    <li class="active"><a href="#graduation" data-toggle="tab">graduation</a></li>
    <li><a href="#graduate" data-toggle="tab">graduate</a></li>
    <li><a href="#extension" data-toggle="tab">extension</a></li>
</ul>
<div class="tab-content" id="TabContent">
    <div class="tab-pane fade" id="graduation">
        <p>
            anything
        </p>
    </div>
    <div class="tab-pane fade in active" id="graduate">
        <p>
            graduate
        </p>
    </div>
    <div class="tab-pane fade" id="extension">
        <p>
            extension
        </p>
    </div>
</div>

Answer 1

您实际上将此信息存储在您的 url 中。

如果你这个页面的原始url是“//foo.bar/example”，那么你可以扩展到这三个url

• //foo.bar/example#graduation
• //foo.bar/example#graduate
• //foo.bar/example#textension

当用户点击一个选项卡时，您可以更新 url，当您的页面加载时，您可以使用 window.location.hash 获取哈希片段并使用哈希片段激活相应的选项卡。

如果您使用的是一些前端框架，例如 backbone 或 angular，它们具有内置的路由支持，可以让您的工作变得更轻松。

与 cookies/localStorage 相比，它的优势在于您可以将这些 url 发送给其他人，他们将被带到指定的确切选项卡。