bootstrap 选项卡,刷新 ,tab页选中不改变,不切换选项卡,仍停留在当前选项

最新推荐文章于 2024-02-29 17:28:51 发布

暗恋花香

最新推荐文章于 2024-02-29 17:28:51 发布

阅读量2.8k

点赞数

分类专栏： Web前端 # Bootstrap 文章标签： Bootstrap

本文链接：https://blog.csdn.net/qq_42324086/article/details/103758356

版权

在页面的 js 代码里引入下面这段代码

 /*Bootstrap 3：在页面刷新时保持选中的选项卡*/
 $(document).ready(function () {
     if (location.hash) {
         $("a[href='" + location.hash + "']").tab("show");
     }
     $(document.body).on("click", "a[data-toggle='tab']", function (event) {
         location.hash = this.getAttribute("href");
     });
 });
 $(window).on("popstate", function () {
     var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
     $("a[href='" + anchor + "']").tab("show");
 });

示例代码(可以直接运行)

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签页（Tab）插件事件</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

暗恋花香

关注关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
bootstrap 选项卡,刷新 ,tab页选中不改变,不切换选项卡,仍停留在当前选项

在页面的 js 代码里引入下面这段代码 /*Bootstrap 3：在页面刷新时保持选中的选项卡*/ $(document).ready(function () { if (location.hash) { $("a[href='" + location.hash + "']").tab("show"); } $(document.body...
复制链接

扫一扫