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

为此，你可以做一件事：

导航至标签页时，请在其上使用#hashbang。即，不要return false;或event.preventDefault();。
根据window.location.hash，获取当前标签并在DOMReady上激活。

<强>段

＆＃13;

$(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");
  }
});

＆＃13;

* {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;}

＆＃13;

<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>

＆＃13;

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

1 个答案: