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. Cain工具ARP欺骗攻击

    OS:Win7工具:Cainhttp://pan.baidu.com/s/1xq9lW 密码:409z 网络:本机和被攻击电脑有线连接路由器. Cain是有名的局域网嗅探工具,有丰富的功能.比如可以解 ...

  2. Beyond Globally Optimal: Focused Learning

    这里对WWW 2017文章<Beyond Globally Optimal: Focused Learning for Improved Recommendations>进行一个简单的分析 ...

  3. 在visual studio的工程项目应用中打开console控制窗口

    在visual studio的工程项目应用中打开console控制窗口,这个可以方便我们在console中输出参数的值检查错误. 只需要在需要打开console的地方加入下面的代码即可. AllocC ...

  4. BZOJ 1303: [CQOI2009]中位数图【前缀和】

    1303: [CQOI2009]中位数图 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2737  Solved: 1698[Submit][Statu ...

  5. [51nod Round 15 B ] 完美消除

    数位DP. 比较蛋疼的是,设a[i]表示第i位上数字,比方说a[1]<a[2]>a[3],且a[1]==a[3]时,这两位上的数可以放在一起搞掉. 所以就在正常的f数组里多开一维,表示后面 ...

  6. Java学习之封装

    Java是一种面向对象的编程语言,对于面向对象的编程语言中有一种思想叫做封装. 封装是一种很重要的思想,今天在看教学视频时,觉得视频中的例子很好的解释了封装的重要性,能够提高程序的健壮性. 视频中以人 ...

  7. Ugly Numbers(STL应用)

    题目链接:http://poj.org/problem?id=1338 Ugly Numbers Time Limit: 1000MS   Memory Limit: 10000K Total Sub ...

  8. 解决JSONObject.fromObject数字为null时被转换为0

    在使用JSONObject.fromObject的时候会遇到一种情况就是当对象的某一个Double型或Integer型的属性为空的时候,转JSON的时候会变成0.当一个布尔型的属性为空的时候,转JSO ...

  9. c++中的overload、overwrite、override

    作为初学者,本文只从语法和简单的使用角度对overload.overwrite.override进行了区分,不曾涉及原理,记录下来以供查阅. 1.verload(重载) 1.1 基本要求: c++中的 ...

  10. thinkphp发送邮件需要开启什么设置

    邮件配置 'THINK_EMAIL' => array( 'SMTP_HOST' => 'smtp.163.com', //SMTP服务器 'SMTP_PORT' => '465', ...