Question

我创建了一个简单的标签。当我点击tab时，它获得了活动类，内容得到了改变。但问题是开发人员通过服务器端代码调用内容，在该代码中页面得到刷新，并且每次调用url都会发生变化。

在此方案中，每个刷新活动类从当前选项卡中删除。

我知道有一种方法可以在数据属性上定义文本，并在url隐藏字段上调用该属性文本，然后比较它。所以我可以定义活动类，如果比较是真的。

但我不知道如何实现这一目标。

HTML：

<div class="main">
  <div class="menu">
    <ul>
      <li class="active">link 1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
    </ul>
  </div>

  <div class="content">
    <div class="one">
      <p>Paragraph 1</p>
    </div>
    <div class="one">
      <p>Paragraph 2</p>
    </div>
    <div class="one">
      <p>Paragraph 3</p>
    </div>
    <div class="one">
      <p>Paragraph 4</p>
    </div>
  </div>

</div>

JS：

$(".content .one").not(":first").hide();
$(document).on("click", ".menu li", function(){
  var i = $(this).index();
  $(".menu li").removeClass("active");
  $(this).addClass("active")
  $(".content .one").hide();
  $(".content .one:eq( "+ i +")").show();

})

样品：http://codepen.io/anon/pen/azMdJK

如果还有其他工作，请告诉我

Answer 1

您可以使用HTML5的LocalStorage保存最后一个索引，然后在重新加载后也可以获得最后一个索引的值。

localStorage.setItem("lastindex", 'value');

我为您创建了示例代码：

lastIndex = localStorage.getItem('lastindex');
if(lastIndex == null){
    $(".content .one").not(":first").hide();
}
else{ 
    lastIndex = parseInt(lastIndex)+1;
    $(".content").children().not(".one:nth-child("+lastIndex+")").hide();
    $('ul li').removeClass('active');
    $('ul li:nth-child('+lastIndex+')').addClass('active');
}
$(document).on("click", ".menu li", function(){
  var i = $(this).index();
  localStorage.setItem("lastindex", i);
  // add/remove active class
  $(".menu li").removeClass("active");
  $(this).addClass("active")
  // hide/show content
  $(".content .one").hide();
  $(".content .one:eq( "+ i +")").show();

})

请参阅UPDATED DEMO，它也会在重新加载页面后维护最后一个标签页。

Answer 2

使用历史API和查询字符串。将网址设置为?tab=tabIndex并在页面加载时处理查询字符串。

例如：在第二个标签页上单击，将网址设置为http://www.example.com?tab=2。如果我正在尝试加载http://www.example.com?tab=3获取当前标签为3并激活相同的内容。

Answer 3

您可以通过以下方式解决此问题，

您可以在网址中附加标签ID作为片段标识符（hashtag），然后在页面加载时，您可以应用jQuery并触发点击特定标签。
您可以将数据保存在Cookie中，只要单击选项卡，将其保存在Cookie中，然后在页面加载时检查该ID，然后再查看相同的进程。（触发单击该特定选项卡）。
更好的方法是使用AJAX处理服务器端调用。

也可以使用Manwal的解决方案，HTML5存储。

如何在重新加载页面后获取最后一个索引

3 个答案: