在加载新页面时保持Tab持续活动

Question

现在我有一个基于Tab的布局，当我点击一个标签并加载一个新页面时，在点击它之前，标签的悬停状态在加载新页面时不会保留，并且它默认为原始选项卡已设置。

购买时的模板完全按照我想要传达的方式进行传达（参见链接）。我目前所做的工作不是所提供的链接，而是我所说的不像最初购买的产品一样持久。

My Page

Answer 1

我不确定这是你指的是什么，但我的猜测是，当你在“元素”标签上刷新页面时，你想让它重新加载“元素“选项卡已选中。

执行此操作的典型方法是使用哈希标记和一些JavaScript逻辑。具体来说：您的每个标签实际上都是<a />标签，目前它们各自的网址为href='#' - 这意味着它们是哈希标记链接。但是 - 它们都链接到基础哈希。

通常，您将看到每个选项卡将具有不同的哈希引用，这引用了页面应该处于的不同视图模式。因此 - 如果URL包含#dashboard，则javascript在页面上知道，一旦页面加载，它应该显示仪表板。另一方面，如果网址包含#elements，则应显示“元素”标签。

有一些可靠的插件可以处理这类事情 - 但是没有对你的UI进行重大改写（这已经非常时髦了） - 我建议只做一点jQuery来弄清楚是什么哈希是，并在加载时检查它。

查看Stack Overflow问题Retrieve specific hash tag's value from url，作为使用主题标签的一些方法的示例。

Answer 2

如果您要弄清楚的问题是如何设置标签以反映页面更改，则需要根据加载的网址调整标签上的“当前”类。通过检查html视图中的nav元素，可以在浏览器控制台中轻松查看此类。

如果您的服务器代码添加，则类可能最容易。

导航标签的javascript（jQUery）代码从scripts.js的第477行开始

Answer 3

问题是，当新页面加载时，您没有将“当前”类传递给选项卡。因此，如果您单击第二个，第三个，第四个选项卡，并重新加载页面，或者加载新的原始选项卡，其中“current”类仍然是第一个选项卡。

您必须在每页的基础上手动将“当前”类应用于每个选项卡，或者构建逻辑以确定在加载页面时您打开的页面以使用“当前”类填充右侧选项卡，基本上这取决于你的实际模板是如何布局的，它是静态的，动态的等等。