Question

我正在使用jQuery选项卡，在我的一个选项卡上有一个刷新页面的功能，然后在刷新后显示相同的选项卡。

这是我到目前为止所做的，但它似乎没有将标签设置为激活：

setTimeout(function(){ 
    location.reload();
    $("#tabs").tabs({ active: 1});
}, 1000);

我的标签：

<div id="tabs">
    <ul id ="tabList" style="line-height: 3.3;">
        <li><a href="#tabs-1">Carrier Details</a></li>
        <li><a href="#tabs-2">Contacts</a></li>
    </ul>
    <%--This is Carrier Details Tab--%>   
    <div id="tabs-1">
        <%@include file="carrierProfileDetails.jspf" %>
    </div>
    <%--This is Contacts Tab--%>  
    <div id="tabs-2">
        <%@include file="carrierProfileContacts.jspf" %>
    </div>
</div>

我希望刷新后显示联系人标签。

Answer 1

您可以使用sessionStorage作为案例，您可以设置/获取/更新数据，刷新后可以访问它。这是一个简单的示例，但它不能在片段中工作，您可以在本地创建HTML页面并检查它（它在本地工作正常）：

<body>
  <h1>Active tab: <span id="tab-number"></span></h1>

  <button onclick="changeTab('1')">Tab 1</button>
  <button onclick="changeTab('2')">Tab 2</button>
  <button onclick="changeTab('3')">Tab 3</button>

  <script>
      var ssActiveTab = sessionStorage.getItem('activeTab');
      if (ssActiveTab) {
          changeTab(ssActiveTab);
      }
      function changeTab(newTab) {
          document.getElementById('tab-number').innerText = newTab;
          sessionStorage.setItem('activeTab', newTab);
      }
  </script>
</body>

主要思想是在每次更改时将标签的当前状态设置为sessionStorage，并在页面加载时从中获取最后一个状态。如果item存在且具有值 - 则根据此数据设置状态。

Answer 2

location.reload();

这将重新加载网页，而不是一行将执行此操作。

如果您想在页面加载时始终激活相同的标签页，请在$("#tabs").tabs({ active: 1});方法上写下body onload。

使用setTimeout刷新页面后，显示页面刷新前显示的选项卡

2 个答案: