浏览器后退/下一步按钮在标签之间导航

共6个回答, 标签: javascript jquery

这个赏金已经结束。这个问题的答案有资格获得 50 的声誉奖金。赏金宽限期在 23 小时后结束。Efe正在寻找一个来自可靠来源的回答.

我从用户那里得到很多抱怨,当他们使用我的基于 jQuery 的标签时,他们觉得很烦人,当他们点击他们的浏览器时, 他们不会进入上一个标签,而是进入上一页。我添加了以下上一个/下一个按钮,但还不够。我如何重新配置我的按钮,以便当用户单击浏览器后退箭头时,他们会转到上一个选项卡而不是上一页。你可以测试它这里.

$ ('# Quicktabs-registration_steps')。追加 ('prevcontinues');
$ ('.Tablink-prev')。单击 (函数 () {
Var index = $ ('.quicktabs-tabs li.Active').index ();
$ ('.Quicktabs-tabs li').eq (索引).removeClass ('active');
如果 (索引 = = 0) {
索引 = 1;
}
$ ('。Quicktabs-tabs li')。eq (索引-1)。addClass ('active');
$ ('。快速标签-标签列表')。eq (索引-1)。查找 ('a')。单击 ();
返回 false;
});
$ ('.Tablink-next')。单击 (函数 () {
Var 长度 = $ ('.quicktabs-tabs').first ().children ().size ();
Var index = $ ('.quicktabs-tabs li.Active').index ();
$ ('.Quicktabs-tabs li').eq (索引).removeClass ('active');
//如果 (parseInt (索引) = = parseInt (长度)-1) {
//Index = index-1;
//}
如果 (parseInt (索引) = = parseInt (长度)-1) {
窗口。位置。href = '/home';//重定向到 home
//Index = index-1;
}
$ ('.Quicktabs-tabs li').eq (索引 1).addClass ('active');
$ ('。快速标签-标签列表')。eq (索引 1)。查找 ('a')。单击 ();
返回 false;
});
第1个答案

您可以使用历史记录。

打开新选项卡时推送历史记录状态

History.pushState ({page: 1},"title 1","?page = 1")

参考: Https://developer.mozilla.org/en-US/docs/Web/API/History_API

第2个答案

没有你的完整代码,我不能给你一个定制的例子,但你可以简单地添加锚标签包含 div 的每个标签。

这将在用户每次点击标签链接时更新 URL。这些 URL 更改将存储在浏览器历史记录中,并在向后导航时被召回。


  表 1
  此选项卡内容



  表 2
  此选项卡内容



  表 3
  此选项卡内容



  表 4
  此选项卡内容

每次单击选项卡时,更新的 URL 将如下所示:

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4

第3个答案

一方面,你的下一个标签函数是用 javascript 编写的,另一方面, 浏览器中的 “后退” 按钮使用浏览器历史记录,因此这与您的功能无关,根本无法让您进入上一个选项卡。

所以你有两种方法来实现它:

第 1: 尝试通过刷新浏览器将每个步骤加载到不同的页面中,以便页面保存在浏览器历史记录中,并且通过按下后退按钮,您可以看到上一个步骤

第 2: 你应该有一个 “上一步” 按钮来查看上一步,就像你的下一步按钮一样

第4个答案

更改哈希类似于推送状态history.pushState which triggers popstate事件。在浏览器上点击后退和前进会弹出并推动这些状态,所以你不需要任何其他自定义处理程序。

PS: 您可以添加 css 样式到:target from your active class. The window.addEventListener('popstate' here just logs to show you the event but the event.state在这种情况下将始终为 null。

运行代码段尝试导航标签,然后使用浏览器的后退和前进按钮。


Div {显示: 无}
: 目标 {显示: 块}



  表 1 | 表 2 | 表 3 | 表 4



  此选项卡 1 内容



  此选项卡 2 内容



  此选项卡 3 内容



  此选项卡 4 内容



  (() => {
history.pushState(null, '', '#Tab1');
window.addEventListener('popstate', event => {
 console.log(window.location.hash);
});
})()
第5个答案

我已经使用 bootsrap 标签与浏览器标签导航下面是完整的例子。





朋友




追随者




跟随




邀请






/* *
* 添加//id = "朋友" 数据-分页-id = "朋友"
* 在您的 html 标签中还添加了演示 html。
* */
$ (文档).ready (函数 () {
Const param = 'tabid';
$ ("[数据-分页-id]")。单击 (函数 () {

Const pageParam = $ (这个)。attr ('数据-分页-参数') | | 参数;

//将 tabId 添加到参数中
AddParam (pageParam,$ (这个)。attr ('数据-分页-id'),true);
});

Const preTab = getParamVal (参数);

如果 (参数) {
$ ('[数据-分页-id =' 'preTab'] ')。单击 ();
}
});


/* *
* 添加参数的 url,如果准备是假的,那么所有以前
* 参数将被删除。
* */
AddParam = (pageParam,paramValue,preParams) => {
//无参数获取当前 url
Var mainUrl = 窗口.位置.href.split ('?') [0];

//获取没有 url 的参数
Var paramString = 位置.搜索.子字符串 (1);

如果 (准备和参数字符串) {//当找到参数

//将参数字符串更改为 json 对象
Var paramsObj = JSON。 parse ('{"' decodeURI (paramString)。替换 (/"/g,'\ \"')。替换 (/&/g,'",' ')。替换 (/=/g,'":"') '"}');
} Else {
//当当前参数为空时,创建一个空对象。
Var paramsObj = {};
}

//仅适用于广告标签
如果 (pageParam) {
//将 tabId 添加到参数中
ParamsObj [pageParam] = paramValue;

//在不刷新页面的情况下推送参数。
History.pushState (false,false,mainUrl '?' $.param (paramsObj).replace (new RegExp ('+','gi'),''));
}
};

/* *
* 从 url 获取参数值,如果不存在,则返回 null
* */
GetParamVal = (pageParam) => {
Const mainUrl = 窗口.位置.href.split ('?') [0];
Const 参数字符串 = 位置.搜索.子字符串 (1);
Const paramsObj = JSON。 parse ('{"' decodeURI (paramString)。替换 (/"/g,'\ \"')。替换 (/&/g,'",' ')。替换 (/=/g,'":"') '"}');

返回 paramsObj [pageParam];
};

您可以检查我的代码的实时工作示例

1> 转到Https://www.notesgen.com(使用桌面)

2> 以学生身份创建您的帐户

3> 转到我的帐户/我的下载

4> 点击我的连接

第6个答案

您需要的第一件事是,通过$ Event.preventDefualt ()在点击事件和自定义历史记录中History.pushState (数据、标题、 url).

在 js 中,我们有一个事件可以帮助我们控制用户的后退和前进事件。此事件名称为 “popstate”。你可以通过Window.addEventListener ('popstate',回调)。 在回调函数中,您可以激活和停用标签 (添加和删除类) 并提取 url。

我用示例代码展示了这一点。为了更好地执行和理解,请在服务器或本地服务器中尝试,因为此处更改 url 是有限的:

$ ('Nav ul a').on ('click',函数 ($ e) {
函数 appendContent (散列) {
$ ('# Content')。文本 ('项目 $ {hash} 的内容');
}
$ E.preventDefault ();//当单击链接时,请停留在页面中
Let _ this = this;//获取链接标签
让 hash = _ this.hash.replace (/\ #/,'');

附录内容 (散列);
$ ('Li')。removeAttr ('class');
$ ('A')。removeAttr ('class');
$ ('A [href * = $ {hash}]')。 addClass ('文本白色')。 addClass ('border-0')。父级 ()。 addClass ('bg-primary')。 addClass ('最后风格');

History.pushState ('',_ this.text,hash);//在历史中添加链接

Window.addEventListener ('popstate',函数 ($ e) {
让 hashAgain = 位置.散列.替换 (/\ #/,'');//您提取散列
AppendContent (hashAgain);//设置后退或前进链接的内容
$ ('Li')。removeAttr ('class');
$ ('A')。removeAttr ('class');
$ ('A [href * = $ {hash}]')。 addClass ('文本白色')。 addClass ('border-0')。父级 ()。 addClass ('bg-primary')。 addClass ('last-style');//更新选项卡的状态


});
}); </Code> </pre>Ul li {
显示: 内嵌块;
边缘: 1em;
}

李 a,
。Last-style {
边框: 1px 实心;
填充: 0.5em 1em;
}





        深入学习 Java 脚本






            深入学习 JS


                    家
                    项目 1
                    项目 2
                    项目 3
                    项目 4





            负载内容在这里










相关问题

如何从异步调用返回响应? 循环中的 JavaScript 闭包--简单的实际示例 如何从异步调用返回响应? 动态创建的元素上的事件绑定? JavaScript 将前 5 个字符替换为 * 浏览器后退/下一步按钮在标签之间导航