HTML中引入tabs如下:

<ul class="nav">
<li><a href="#a" tt="A.html" data-toggle="tab">页面A</a></li>
<li><a href="#b" tt="B.html" data-toggle="tab">页面B</a></li>
<li><a href="#c" tt="C.html" data-toggle="tab">页面C</a></li>
</ul> <div id="myTabContent" class="tab-content">
<div class="tab-pane active" id="a"></div>
<div class="tab-pane" id="b"></div>
<div class="tab-pane" id="c"></div>
</div>

  js中使用方式:

/*选择性加载页面,初始加载页面A*/
$(function() {
$(".nav li").click(function () {
var _a = $(this).find("a");
if($(_a.attr("href")).html()==""){ //判断页面是否已加载
$(_a.attr("href")).addClass("active").siblings().removeClass("active");
//tab页点击事件对应的页面元素置为"active"样式,其他兄弟页面移除"active"样式
$(_a.attr("href")).load(_a.attr("tt"));
//加载样式为"active"的页面
}
});
$(".nav.nav-tabs li").get(0).click(); //默认选择加载第一个页面A
});

  

bootstrap tabs 默认tab页的使用方式的更多相关文章

  1. element-ui的tabs默认选中页签

    Element-UI提供了tabs组件(选项卡.多页签),其中在tabs的属性中提供了一个value/v-model属性来绑定默认选中的页签. 我们通过简单的示例来看一下具体是怎么使用的. <t ...

  2. Android 常用UI控件之TabHost(5)Tab栏在底部且在最上层也不盖tab页

    tab栏在底部 <TabHost android:id="@android:id/tabhost" android:layout_width="match_pare ...

  3. easyUI tab页的显示与隐藏

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 隐藏:tab_option = $('#tabid').tabs('getTab'," ...

  4. 值得分享的Bootstrap Ace模板实现菜单和Tab页效果(转)

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  5. Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页

    先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...

  6. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  7. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  8. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  9. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)

    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

随机推荐

  1. DOM拓展表格小练习

    涉及的知识点 DOM操作HTML页面.DOM操控表格.一些基本的事件.遍历知识.数组字符串知识.函数的作用域知识 效果图 html代码 <body><div id="con ...

  2. Linux批量处理文件脚本

    Linux shell字符串截取与拼接 一 Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.linuxidc.com/123.htm 1  # 号截取,删除左边 ...

  3. 洛谷 P3410 拍照

    洛谷 P3410 拍照 题目描述 小B有n个下属,现小B要带着一些下属让别人拍照. 有m个人,每个人都愿意付给小B一定钱让n个人中的一些人进行合影.如果这一些人没带齐那么就不能拍照,小B也不会得到钱. ...

  4. ex_gcd(个人模版)

    ex_gcd: #include<stdio.h> #include<string.h> using namespace std; int x,y; int ex_gcd(in ...

  5. HDU 1495 非常可乐(数论,BFS)

    非常可乐 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  6. BZOJ1786: [Ahoi2008]Pair 配对/1831: [AHOI2008]逆序对

    这两道题是一样的. 可以发现,-1变成的数是单调不降. 记录下原有的逆序对个数. 预处理出每个点取每个值所产生的逆序对个数,然后dp转移. #include<cstring> #inclu ...

  7. VS2012 TFS解决离职后代码遗留未迁入问题

    第一步: 在命令行中输入 C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE 第二步: 根据用户查找该用户下workspac ...

  8. 面试(2)-java-se-HashSet和TreeSet12

    Set是java中一个不包含重复元素的collection.更正式地说,set 不包含满足 e1.equals(e2) 的元素对 e1 和 e2,并且最多包含一个 null 元素.正如其名称所暗示的, ...

  9. [国嵌笔记][026][ARM伪指令]

    ARM机器码 1.汇编程序通过汇编器变成机器码,然后才能在ARM处理器上运行 2.ARM机器码是一个32位的数,被分成了多个段,每个段都有各自的含义 3.格式: cond:表示条件(4位) I:表示源 ...

  10. VUE之ECMAScript6(es6)

    es6:es:EMCAScript 6 (es2015)Emca:国际标准组织 1.常量和变量 const a = "hello" let:定义一个块级作用域的变量 需要先定义再使 ...