Question

如果我在多个页面之间进行操作，如何让每个后续页面上的标签保持打开/激活状态？

例如，在着陆页上，我点击＆＃34;英文＆＃34;然后点击链接＆＃34;产品＆＃34;英语标签已在产品页面上打开。

<ul class="nav navbar-nav" id="langTab">
<li role="presentation" class="active"><a href="#español" aria-controls="español" role="tab" data-toggle="tab">Español</a></li>
<li role="presentation" class=""><a href="#english" aria-controls="english" role="tab" data-toggle="tab">English</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane" id="español" role="tabpanel">Spanish content</div>
  <div class="tab-pane" id="english" role="tabpanel">English content</div>
</div>

Answer 1

您可以在选项卡上单击添加事件侦听器，而不是在localstorage中保存选项卡ID，类似

<a href="#español" aria-controls="español" onclick="tabClicked()" role="tab" data-toggle="tab">Español</a>

和js

function tabClicked() {
   localStorage.setItem('active-tab', $(event.currentTarget).attr('href'));
}

然后在你提出的window.onload和window.onfocus事件中

var activeTab = localStorage.getItem('active-tab');
// and trigger that tab
if (activeTab) {
    $('[href="' + activeTab + '"]').tab('show');

在没有页面刷新的情况下，多个页面上的选项

1 个答案: