您可以直接复制代码 注意在同级别文件夹中引用 相应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. c++ anonymous union,struct -- 匿名联合体和机构体

    c++ anonymous union,struct -- 匿名联合体和机构体 结构体和联合体各自的基本用法不赘述,仅说一下他们匿名时访问的情况.如果是token不同,可以直接跨层访问.例子 #inc ...

  2. Swift - 标签条（UITabBar）标签页控制器（UITabBarController）用法

    App底部的tab标签页可以方便的把功能模块划分清楚,只需点击相应的标签页就可以展示完全独立的视图页面,同时各标签页间的视图也可以进行数据交换.   TabBarItem系统自带图标样式(System ...

  3. enum可以做索引

    enum可以做索引 enum可以做索引, 配上虚函数,或者函数指针,可以实现上层的统一封装和快速索引. 点击(此处)折叠或打开 MoTbl.cpp #include <stdio.h> # ...

  4. Centos 7 学习之静态IP设置

    原文链接:http://blog.csdn.net/johnnycode/article/details/40624403 本学习主要针对 Centos 7.0.1406 版本进行学习整理! 如果你使 ...

  5. 一个发送邮件的C++库–jwsmtp

    接收邮件的,暂时没搞定,不过在SF上找到了这个发送邮件的库文件.它提供了一个比较完整的类,可以简单的调用发送邮件.下面是作者提供的一个例子,不过由于连SMTP发邮件需要密码,所以代码我改了一下.// ...

  6. 小议common lisp程序开发流程 - Ever 17 - 博客频道 - CSDN.NET

    小议common lisp程序开发流程 - Ever 17 - 博客频道 - CSDN.NET 小议common lisp程序开发流程 分类: lisp 2011-04-17 20:59 1316人阅 ...

  7. PHP中如何实现 “在页面中一边执行一边输出” 的效果

    <?php    set_time_limit(0);  //在有关数据库的大量数据的时候,可以将其设置为0,表示无限制.    ob_end_clean();     //在循环输出前,要关闭 ...

  8. HDU 3613 Best Reward 正反两次扩展KMP

    题目来源:HDU 3613 Best Reward 题意:每一个字母相应一个权值 将给你的字符串分成两部分 假设一部分是回文 这部分的值就是每一个字母的权值之和 求一种分法使得2部分的和最大 思路:考 ...

  9. Python处理海量手机号码

    Python处理海量手机号码 一.任务描述 上周,老板给我一个小任务:批量生成手机号码并去重.给了我一个Excel表,里面是中国移动各个地区的可用手机号码前7位(如下图),里面有十三张表,每个表里的电 ...

  10. 一二三（The Seventh Hunan Collegiate Programming Contest）

    一二三 你弟弟刚刚学会写英语的一(one).二(two)和三(three).他在纸上写了好些一二三,可惜有些字母写错了.已知每个单词最多有一个字母写错了(单词长度肯定不会错),你能认出他写的啥吗? 输 ...