刷新页面后，jquery中是否有任何功能可保持相同的选项卡

Question

大家好，我有一个基本的jquery标签。 即使重新加载页面后，我也希望保留在同一选项卡上。 我尝试了本地存储方法，但是不起作用。 请提出一些建议以摆脱它`

jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e)  {
var currentAttrValue = jQuery(this).attr('href');

// Show/Hide Tabs

  jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
  jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
  // Change/remove current tab to active
  jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

  e.preventDefault();
});
});

Answer 1

为此，您可以做一件事：

1. 导航到选项卡时，在其上使用#hashbang 。 即，不要return false; 或event.preventDefault(); 。
2. 基于window.location.hash ，获取当前选项卡并在DOMReady上将其激活。

片段

 $(function () { $(".tab:not(#tab1)").hide(); $(".tabs li a").click(function () { $(".tab:visible").hide(); $(".active").removeClass("active"); $($(this).attr("href")).show(); $(this).addClass("active"); }); if (window.location.hash.length > 0) { $(".tab:visible").hide(); $(".active").removeClass("active"); $(window.location.hash).show(); $('a[href="' + window.location.hash + '"]').addClass("active"); } }); 

 * {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';} .tabs li {display: inline-block;} .tabs li a {text-decoration: none; display: block;} .tabs li a.active {font-weight: bold;} 

 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <ul class="tabs"> <li><a href="#tab1" class="active">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tabcontent"> <div class="tab" id="tab1">Tab 1 Contents</div> <div class="tab" id="tab2">Tab 2 Contents</div> <div class="tab" id="tab3">Tab 3 Contents</div> </div>