Question

我有一个使用boostrap轮播的页面。每张幻灯片显示4个div。从每个div我们都可以访问有关产品规格的页面。此页面有一个使用以下按钮：

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

返回带滑块的上一页。问题是当我点击这个按钮时我想回到同一张幻灯片（活动幻灯片，活动项目）。现在它重定向到第一张幻灯片活动的页面。

Answer 1

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

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

本地主机/ web.html＃滑件1

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

Answer 2

当用户点击后退按钮存储幻灯片中的幻灯片编号时，您可以将cookie添加到用户的浏览器中，例如：

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

然后，在第一页上，在$(document).ready()函数中，找到cookie，获取值，然后使用bootstrap的.carousel（数字）方法转到相应的幻灯片。然后删除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功能。

返回包含相同活动项目的页面（bootstrap carousel）

2 个答案: