bootstrap中刷新页面，tab页选中不改变。

淡淡的烟草味﹌ 2022-08-13 19:52 183阅读 0赞

直接拷贝本人代码即可 注意在同级目录下引用 相应的js 和 css。

能实现tab效果 关键看bootstrap的 data-toggle= tab

<html lang="en">  
<head>  
<meta charset="UTF-8">  
<link rel="stylesheet" href="bootstrap.min.css">  
<script src="jquery-1.11.1.min.js"></script>  
<script src="bootstrap.min.js"></script>  
<script>  
  
$(document).ready(function() \{  
if(location.hash) \{  
$('a\[href=' + location.hash + '\]').tab('show');  
\}  
$(document.body).on("click", "a\[data-toggle\]", 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');  
\});  
</script>  
</head>  
<body>  
  
<ul class="nav nav-tabs" id="myTab">  
<li class="active"><a data-toggle="tab" href="\#home">Home</a></li>  
<li><a data-toggle="tab" href="\#profile">Profile</a></li>  
<li><a data-toggle="tab" href="\#messages">Messages</a></li>  
<li><a data-toggle="tab" href="\#settings">Settings</a></li>  
</ul>  
  
<div class="tab-content">  
<div class="tab-pane active" id="home">home</div>  
<div class="tab-pane" id="profile">profile</div>  
<div class="tab-pane" id="messages">messages</div>  
<div class="tab-pane" id="settings">settings</div>  
</div>  
  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 Tab页切换时页面自动刷新效果

Tab页切换时页面自动刷新效果由于工作中奇葩的需求和页面设计，如下： ![tab页效果][tab] > 效果要求：tab页切换时要刷新一次页面，但问题是整个父页

清疚/ 2023年10月17日 17:13/ 0 赞/ 30 阅读

相关 VUE 返回上一页不刷新页面

记录一下，免得下次忘了转载自：[原文链接][Link 1] [Link 1]: https://blog.csdn.net/weixin_42406046/arti

Bertha 。/ 2023年06月25日 02:26/ 0 赞/ 39 阅读

相关 vue ts 跳转当前页面改变参数页面不刷新

使用TS Watch 装饰器监听 $route 变化从新请求数据 @Watch('$route') on$routeChange () \{ this

一时失言乱红尘/ 2023年05月21日 07:03/ 0 赞/ 54 阅读

相关 jq分页不刷新页面_jQuery+Ajax实现无刷新分页

1、前台使用ajax无刷新分页，主要需要生成分页的工具条，这里使用的是jquery.pagination.js 下面贴出代码 /\\ \ This jQuery plug

短命女/ 2023年01月09日 12:59/ 0 赞/ 211 阅读

相关 bootstrap中刷新页面，tab页选中不改变。

直接拷贝本人代码即可注意在同级目录下引用相应的js 和 css。能实现tab效果关键看bootstrap的 data-toggle= tab <html la

淡淡的烟草味﹌/ 2022年08月13日 19:52/ 0 赞/ 184 阅读

相关 bootstrap标签页（tab）

Bootstrap 标签页（Tab）插件标签页（Tab）在 [Bootstrap 导航元素][Bootstrap] 一章中介绍过。通过结合一些 data 属性，您可以轻

r囧r小猫/ 2022年05月31日 04:23/ 0 赞/ 343 阅读

相关 BootStrap 多个tab页面保存提交后停留在操作tab页或者指定tab页

jQ+ Bootstrap 动态控制tab页面切换最近在做一个功能,一个页面包含多个tab页签,每一个tab页面都有保存和提交按钮功能, 现在是希望在某个tab页面点击

叁歲伎倆/ 2022年05月24日 07:20/ 0 赞/ 275 阅读

相关 easyui tabs update 强制刷新页面

var tab = artDialog.open.origin.$("\tabs").tabs("getTab", "公司评级"); var url = tab.pa

╰半夏微凉°/ 2021年12月20日 13:49/ 0 赞/ 352 阅读

相关浅析Bootstrap中Tab（标签页）的使用方法

Bootstrap 导航元素使用相同的标记和基类，改变修饰的`class`，可以在不同的样式间进行切换如"`.nav-pills`"（胶囊式导航）与 “`.nav-tab

雨点打透心脏的1/2处/ 2021年06月26日 16:06/ 0 赞/ 525 阅读

相关 DWZ tab选项卡共用页面分页组件刷新不起作用、失效问题

初用DWX，还是碰到好多问题，谨以此文记录tab 分页刷新问题。 HTML页面 tab页面： ![watermark_type_ZmFuZ3poZW5naGVpd

你的名字/ 2021年05月12日 11:55/ 0 赞/ 675 阅读