您可以直接复制代码 注意在同级别文件夹中引用 相应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>

bootstrap在 刷新页面,tab选择页面不会改变。的更多相关文章

  1. EasyUI两种动态添加tab Iframe页面的方法

    /** 动态添加tab-----方式一 **/ function addIframeTab(titleTxt,href,icon) { $('#mytabs').tabs('addIframeTab' ...

  2. JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址

    JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...

  3. asp.net mvc Ajax.BeginForm不能异步刷新,或转到新页面,或页面还是刷新了,的原因(或解决办法)(转)

    昨天搞了一下午的Ajax.BeginForm都没能实现异步刷新,一直将返回的数据提交到新的页面,在网上搜了n多方法都不行,问了n多人都没能搞定,今天大一早,就意外的被我发现了问题所在. 布局页: &l ...

  4. angular页面缓存与页面刷新

      angularJS学习笔记:页面缓存与页面刷新 遇到的问题 现在存在这样一个问题,登录前与登录成功后是同一个页面,只不过通过ngIf来控制哪部分显示,图像信息如下: 所以,整体工作不是很难,无非就 ...

  5. ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行

    https://blog.csdn.net/yang450712123/article/details/79276102 https://blog.csdn.net/Chengbin_Huang/ar ...

  6. bootstrap在iframe框架中实现由子页面在顶级页面打开模态框(modal)

    我需要完成的效果: 1.在顶级页面打开模态框,并且遮罩层也要再顶级页面 2.单击遮罩层部分,模态框不关闭 问题描述: 不知为什么,可能是bootstrap前端框架添加遮罩层的一些问题.通过子页面在顶级 ...

  7. Uipath 选择页面下拉列表中的选项

    http://www.rpatokyo.com/ 使用Select item Activity选择页面下拉列表中的选项 在open browser中拖入Select Item Activity,配置参 ...

  8. vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面

    vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...

  9. JS事件 卸载事件 当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。注意:不同浏览器对onunload事件支持不同。

    卸载事件(onunload) 当用户退出页面时(页面关闭.页面刷新等),触发onUnload事件,同时执行被调用的程序. 注意:不同浏览器对onunload事件支持不同. 如下代码,当退出页面时,弹出 ...

随机推荐

  1. mxGraph改变图形大小重置overlay位置

    要在改变图形大小的时候改变overlay的位置.那肯定就要对重置图形大小的方法进行改造了.以下是源文件里的代码 mxGraph.prototype.resizeCells = function(cel ...

  2. J2EE之初识JSP

    上篇博客已经简介了下Servlet.从上篇博客中能够看到.Servlet获得返回来的数据后.显示给client时,须要不断的拼串.从而构成完整的html页面,这就在无形中加大了程序猿的压力和劳动力.而 ...

  3. 程序启动读取和关闭时保存应用程序设置(QSettings)

    保存应用程序设置(QSettings)1. QSettings 类 QSettings 提供保存应用程序当前设置的接口,可以方便地保存程序的状态,例如窗口大小和位置,选项的选中状态等等.在 Windo ...

  4. Android installed app, never used, cannot receiver BroadcastReceiver

    官方文档是这么写的:(http://developer.android.com/about/versions/android-3.1.html#launchcontrols) Launch contr ...

  5. ANDROID L——Material Design综合应用(Demo)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...

  6. Lambda高手之路第一部分

    转http://www.cnblogs.com/lazycoding/archive/2013/01/06/2847574.html 介绍 Lambda表达式是使代码更加动态,易于扩展并且更加快速(看 ...

  7. CF 316C2(Tidying Up-二分图最大边权)

    C2. Tidying Up time limit per test 4 seconds memory limit per test 256 megabytes input standard inpu ...

  8. python爬行动物集合360联想词搜索

    想法和一些代码引用邸一幕python培训黄哥python爬虫联想词视频,但是太罗嗦.顺便整理,而到现在为止,360不傻.它已演变,用原来的方式,有些bug,这接着说. 正题例如以下: 语言:pytho ...

  9. 编程算法 - 萨鲁曼的军队(Saruman&#39;s Army) 代码(C)

    萨鲁曼的军队(Saruman's Army) 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 直线上有N个点, 每个点, 其距离为R以内的区域里 ...

  10. MySQL聚合函数、控制流程函数(含navicat软件的介绍)

    MySQL聚合函数.控制流程函数(含navicat软件的介绍) 一.navicat的引入:(第三方可视化的客户端,方便MySQL数据库的管理和维护) NavicatTM是一套快速.可靠并价格相宜的数据 ...