bootstrap tabs 默认tab页的使用方式
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页的使用方式的更多相关文章
- element-ui的tabs默认选中页签
Element-UI提供了tabs组件(选项卡.多页签),其中在tabs的属性中提供了一个value/v-model属性来绑定默认选中的页签. 我们通过简单的示例来看一下具体是怎么使用的. <t ...
- Android 常用UI控件之TabHost(5)Tab栏在底部且在最上层也不盖tab页
tab栏在底部 <TabHost android:id="@android:id/tabhost" android:layout_width="match_pare ...
- easyUI tab页的显示与隐藏
每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 隐藏:tab_option = $('#tabid').tabs('getTab'," ...
- 值得分享的Bootstrap Ace模板实现菜单和Tab页效果(转)
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页
先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
随机推荐
- Java与算法之(12) - 老鼠再闯迷宫(广度优先算法)
贪吃的小老鼠又回来了,这次有什么新的办法吃到奶酪呢? 规则不变,只能上下左右在格子内移动. 因为上次的深度优先算法让老鼠走了不少冤枉路,这次老鼠带来了帮手探路鼠.探路鼠的使用规则如下: 小老鼠按右.下 ...
- SpringBoot集成security
本文就SpringBoot集成Security的使用步骤做出解释说明.
- loadrunner中如何将MD5加密的值转换为大写
上篇博客中写过如何将MD5加密,但是我们在实际的测试过程中可能需要将加密的结果进行大小写转换.我在这次的测试过程中就遇见了这样的问题, 我在测试时发现开发人员代码传的sign值是大写,而我加密出来的s ...
- b9934107349625014ec251e1333d73a8 这个代码是mad5值
Message Digest Algorithm MD5(中文名为消息摘要算法第五版)为计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性保护.该算法的文件号为RFC 1321(R.Rives ...
- 学习SpirngMVC之如何获取请求参数
学习SpringMVC——如何获取请求参数 @RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他(@Cooki ...
- Codeforces Round #300(Div. 2)-538A.str.substr 538B.不会 538C.不会 。。。
A. Cutting Banner time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- 2017西安网络赛 F
f(cos(x))=cos(n∗x) holds for all xx. Given two integers nn and mm, you need to calculate the coeffic ...
- hbmy周赛1--D
D - Toy Cars Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submi ...
- GO开发[四]:golang函数
函数 1.声明语法:func 函数名 (参数列表) [(返回值列表)] {} 2.golang函数特点: a. 不支持重载,一个包不能有两个名字一样的函数 b. 函数是一等公民,函数也是一种类型,一个 ...
- IDEA的破解安装以及汉化
IDEA是一款比eclipse用起来更好用的一款代码编辑器,本人之前也是一直在用eclipse来写代码,后来发现了IDEA用起来会更顺手,所以又转用IDEA了,今天给大家分享一下IDEA的下载安装破解 ...