返回具有相同活动项目的页面（引导轮播）答案

【问题标题】：Return to page with the same active item (bootstrap carousel)返回具有相同活动项目的页面（引导轮播）
【发布时间】：2017-05-13 05:20:56
【问题描述】：

我有一个使用 boostrap 轮播的页面。每张幻灯片显示 4 个 div。我们可以从每个 div 转到包含产品规格的页面。此页面有一个按钮，它使用：

  $('.goback__button').click(function(){
     window.history.back();
     return false;
   })

使用滑块返回上一页。问题是当我单击此按钮时，我想返回同一张幻灯片（活动幻灯片、活动项目）。现在它重定向到第一张幻灯片处于活动状态的页面。

【问题讨论】：

标签： jquery twitter-bootstrap cookies carousel slide

【解决方案1】：

如果您想在服务器端执行此操作，您可以在请求中传递 Get 参数，然后在 HTML 中选择项目

如果你想直接在 JavaScript 中做，你必须使用哈希或 get 参数（并解析参数），简单的方法是使用哈希例如：

localhost/web.html#slide1

您必须编写控制哈希值的代码，然后修改活动项

【讨论】：

【解决方案2】：

您可以在用户单击后退按钮时向用户的浏览器添加一个 cookie，该按钮存储轮播中幻灯片的编号，例如：

$('.goback__button').click(function(){
  document.cookie = "slide-number=2";
  window.history.back();
  return false;
});

然后，在第一页，在您的$(document).ready() 函数中，找到 cookie，获取值，然后使用引导程序的 .carousel(number) 方法转到相应的幻灯片。然后删除cookie：

$(document).ready(function(){
  var num = getCookie("slide-number");
  if (num != ""){
    num = parseInt(num);
    $('#myCarousel').carousel(num);
    document.cookie = "slide-number=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
});

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
        c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
    }
  }
  return "";
}

免责声明：从W3Schools获取getCookie函数。

【讨论】：