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. cs231n spring 2017 Python/Numpy基础 (1)

    本文使根据CS231n的讲义整理而成(http://cs231n.github.io/python-numpy-tutorial/),以下内容基于Python3. 1. 基本数据类型:可以用 prin ...

  2. UR11 A.元旦老人与汉诺塔

    题目:http://uoj.ac/contest/23/problem/167 如果我们拿个map来存状态的话.设当前状态是v,下一个状态是s.有f[i+1][s]+=f[i][v]. 初始f[0][ ...

  3. codeforces 746C 模拟

    C. Tram time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  4. $(function(){...});的作用

    这是JQuery的语法,$表示JQuery对象,可以有好几种用法.比如传递选择器字符串.页面对象等,如果直接传函数体进去,表示网页加载完毕后要执行的意思.和JAVASCRIPT原来的这个是一样的: w ...

  5. RPM包效验

  6. 浅析@Deprecated,调用方法时出现横线划掉样式

    Deprecated 这个注释是一个标记注释.所谓标记注释,就是在源程序中加入这个标记后,并不影响程序的编译,但有时编译器会显示一些警告信息. 那么Deprecated注释是什么意思呢?如果你经常使用 ...

  7. linux 下CentOS 下 npm命令安装gitbook失败的问题

    运行环境 linux 服务器:CentOS 7.0 系统:安装了nodejs :使用 npm 安装 gitbook 出现错误提示: npm install -g gitbook-cli symbol ...

  8. JavaScript函数声明提升

    首先,JavaScript中函数有两种创建方式,即函数声明.函数表达式两种. 1.函数声明. function boo(){ console.log(123); } boo() 2.函数表达式. va ...

  9. textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  10. WPF DataTrigger数据触发器

    1.通过绑定的属性值变化,动态改变界面的显示,比如绑定了IsExpanded,当为true,grid高度变成600,反之,grid高度变成320. <Grid.Style> <Sty ...