发布于 2017-02-26 12:36:56 | 63 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


这篇文章主要介绍了BootStrap中Tab页签切换实例代码的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航:


<ul class="nav nav-tabs" id="myTab"> 
<li class="active"><a href="#home">Home</a></li> 
<li><a href="#profile">Profile</a></li> 
<li><a href="#messages">Messages</a></li> 
<li><a href="#settings">Settings</a></li> 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="home">...</div> 
<div class="tab-pane" id="profile">...</div> 
<div class="tab-pane" id="messages">...</div> 
<div class="tab-pane" id="settings">...</div> 
</div> 
<script> 
$(function () { 
$('#myTab a:last').tab('show');//初始化显示哪个tab 
$('#myTab a').click(function (e) { 
e.preventDefault();//阻止a链接的跳转行为 
$(this).tab('show');//显示当前选中的链接及关联的content 
}) 
}) 
</script>

此外,你还可以有更多灵活的方式来激活某个特定的tab:


$('#myTab a[href="#profile"]').tab('show'); // Select tab by name 
$('#myTab a:first').tab('show'); // Select first tab 
$('#myTab a:last').tab('show'); // Select last tab 
$('#myTab li:eq(2) a').tab('show');

以上代码需要注意的一点是,每个li中的a标签都要有个href=#id,这个id指向的正是该链接对应的content的id,如果使用javascript实现这种导航内容的切换,a标签中无须再添加data-toggle='tab',当然,如果每个a链接都使用了此属性,那完全没有必要在用js来实现了。



相关阅读 :
BootStrap中Tab页签切换实例代码
bootstrap中添加额外的图标实例代码
在bootstrap中实现轮播图实例代码
BootStrap Typeahead自动补全插件实例代码
基于BootStrap实现局部刷新分页实例代码
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
基于Bootstrap和jQuery构建前端分页工具实例代码
AngularJS 与Bootstrap实现表格分页实例代码
Bootstrap中点击按钮后变灰并显示加载中实例代码
Bootstrap下拉菜单效果实例代码分享
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务