Question

如何在提交表单或刷新页面后保留当前选项卡。标签由li制作，而不是div。这些是标签：

<ul class="tabs">
 <li><a href="#profile" class="active"> Profile </a></li>
 <li><a href="#favourites"> Favourites </a></li>
 <li><a href="#settings"> Settings </a></li>
</ul>
<ul class="tabs-content">
 <li id="profile">TEXT</li>
 <li id="favourites">TEXT</li>
 <li id="settings">submit form...</li>
</ul>

Answer 1

您可以使用CSS :target

这样做

.tabs-content li {
  display: none;
}

#profile:target,
#favourites:target,
#settings:target {
  display: inline-block;
}

<ul class="tabs">
  <li>
    <a href="#profile" class="active"> Profile </a>
  </li>
  <li>
    <a href="#favourites"> Favourites </a>
  </li>
  <li>
    <a href="#settings"> Settings </a>
  </li>
</ul>
<ul class="tabs-content">
  <li id="profile">profile</li>
  <li id="favourites">favourites</li>
  <li id="settings">settings</li>
</ul>

如果您在设置中提交表单，请确保表单操作也具有哈希值。

<form action="save_settings.aspx#settings">

Answer 2

在提交表单时尝试捕获当前li元素。另外，为每个元素添加id。

// assuming class for `submit` button is `submit`
    $('.submit').on('click', function(){
      var linkId = $('.active').atr('id');
    });

页面刷新或提交表单调用后：

$('#'+ linkId).click();

注意：假设您通过Ajax提交表单，如果没有，那么您需要将存储的var值传递给后端并将其传回给视图，然后点击它然后按照相同的代码。

Answer 3

尝试将当前有效标签的索引（即li索引）存储到localstorage / cookies，并在页面加载时检索该值并将该li设为有效标签。

if (typeof(Storage) !== "undefined") {
    // 1 should be replaced with the active li's index
    localStorage.setItem("currentActiveTab", "1");
} else {
    // Sorry! No Web Storage support..
}

在准备好文件时，做一些像

这样的事情

if (localStorage.currentActiveTab) {
    $('li').eq(localStorage.currentActiveTab).click();
}

表单提交后，请留在<li>选项卡上

3 个答案: