您可以直接复制代码 注意在同级别文件夹中引用 相应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. 打开excel2007文档时显示“excel无法打开文件~$book.xltm”

    此问题的出现是因为意外情况导致Excel临时文件没有删掉,把C:\Program Files\Microsoft Office\Office12\XLSTART里面的临时文件“~$book”给删除就好 ...

  2. 同事的Excel中的图片突然不能选择

    今天上午,同事突然说自己用的Excel不能编辑了,发来一看原来是其中做的图片不能编辑,鼠标放上去后显示个圆圈选不中. 在“视图”中调出“控件工具箱”工具栏,上面有一个三角板与直尺样子的按钮叫“设计模式 ...

  3. LVS Nginx HAProxy 优缺点

    搭建负载均衡高可用环境相对简单,主要是要理解其中原理.此文描述了三种负载均衡器的优缺点,以便在实际的生产应用中,按需求取舍. 目前,在线上环境中应用较多的负载均衡器硬件有F5 BIG-IP,软件有LV ...

  4. Socket编程之聊天程序 - 模拟Fins/ModBus协议通信过程

    设备控制软件编程涉及到的基本通信方式主要有TCP/IP与串口,用到的数据通信协议有Fins与ModBus. 更高级别的通信如.net中的Remoting与WCF在进行C/S架构软件开发时会采用. 本篇 ...

  5. 如何下载和编译Android4.0内核源代码goldfish(图像)

    如何下载Android4.0源代码.请参阅我的博客文章中有(同样是图文教程): http://blog.csdn.net/flydream0/article/details/7036156 怎样编译A ...

  6. The mmap module

    The mmap module The mmap module (New in 2.0) This module provides an interface to the operating syst ...

  7. POJ3313 【随便写了个spfa就一A了，嗨皮】

    我顺便明白了....英文题意理解其实好大一部分还是靠感觉,然后自己猜题意,试题意. 你要是纠结于英文你就跪了. #include <iostream> #include <cstdi ...

  8. 表达式树动态拼接lambda

    动态拼接lambda表达式树   前言 最近在优化同事写的代码(我们的框架用的是dapperLambda),其中有一个这样很普通的场景——界面上提供了一些查询条件框供用户来进行过滤数据.由于dappe ...

  9. 分类器是如何做检测的？——CascadeClassifier中的detectMultiScale函数解读

    原地址:http://blog.csdn.net/delltdk/article/details/9186875 在进入detectMultiScal函数之前,首先需要对CascadeClassifi ...

  10. hdu5176（并查集）

    传送门:The Experience of Love 题意:一个叫Gorwin的女孩和一个叫Vivin的男孩是一对情侣.他们来到一个叫爱情的国家,这个国家由N个城市组成而且只有N−1条小道(像一棵树) ...