停留在<李>表单提交后的选项卡

Stay on a <li> tab after form submit

本文关键字：选项 gt lt 停留在 表单提交      更新时间：2023-09-26

提交表单或刷新页面后，如何留在当前选项卡上。选项卡是用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>

您可以这样做，使用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">

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

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

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

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

注意：假设您是通过Ajax提交表单的，如果不是，那么您需要将存储的var值传递到后端，并将其与视图的响应一起传递回来，然后按照相同的代码点击它。

尝试将当前活动选项卡的索引（即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();
}
相关文章：