bootstrap tab切换后,刷新 页面 回到被选中的tab页签

文章描述了一个使用BootstrapTab组件时遇到的问题,即页面刷新后会回到第一个tab。为解决这个问题,文中提供的代码示例利用`history.pushState`来保存当前激活tab的状态,并在文档加载时检查URL的hash来自动显示对应的tab页面。
摘要由CSDN通过智能技术生成

描述:当使用bootstrap 的tab 进行页面切换后,一刷新页面,又回到了第一个初始页,从而又得重新切换,  

实现目标:例如当前切换到第三个页面后,刷新页面自动定位到第三个tab页面中

具体代码:

$('.nav-item a').on('shown.bs.tab', function(e) {
	  history.pushState(null,null, e.target.hash);
 });

$(document).ready(function(){
 	 
 	
 	var hash = window.location.hash;
 	if (hash) {
 	  $('.nav-tabs a[href="' + hash + '"]').tab('show');
 	}
	 
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值