BootStrap中Tab页签切换实例代码

 更新时间:2016年05月30日 15:54:15   作者:lrfgjj2  
这篇文章主要介绍了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来实现了。

相关文章

  • 详解如何构建Promise队列实现异步函数顺序执行

    详解如何构建Promise队列实现异步函数顺序执行

    这篇文章主要介绍了详解如何构建Promise队列实现异步函数顺序执行,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • js Clip奇思妙想之多彩渐变字效果

    js Clip奇思妙想之多彩渐变字效果

    本篇我们用同样的原理,把文字用CLIP属性分的更细,分别着色,然后组合到一起,实现自左到右更精确的色彩渐变。问题是文字细化分割需要用到很多很多个元素,所以这里我们要用程序来控制,自动生成这些元素。
    2008-11-11
  • 以JSON形式将JS中Array对象数组传至后台的方法

    以JSON形式将JS中Array对象数组传至后台的方法

    业务是需要将前台jQuery easyUI DataGrid列表中所选的若干行的数据传到后台进行update操作,具体的实现如下,感兴趣的朋友可以参考下
    2014-01-01
  • 枚举JavaScript对象的函数

    枚举JavaScript对象的函数

    枚举JavaScript对象的函数...
    2006-12-12
  • JS获取和修改元素样式的实例代码

    JS获取和修改元素样式的实例代码

    下面小编就为大家带来一篇JS获取和修改元素样式的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS实现登录页密码的显示和隐藏功能

    JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能。下面给大家介绍基于JS实现登录页密码的显示和隐藏功能,需要的朋友参考下吧
    2017-12-12
  • js Canvas绘制圆形时钟效果

    js Canvas绘制圆形时钟效果

    这篇文章主要为大家详细介绍了js Canvas绘制圆形时钟效果的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • date.parse在IE和FF中的区别

    date.parse在IE和FF中的区别

    这个方法是很常用的,比如在验证输入日期是否存在时,可以使用它,如果是一个不存在的日期,则其返回值将是NaN,另外如果要比较两个日期的先后,或是计算两个日期相差的天数 ,都可以用到。
    2010-07-07
  • weakMap为什么是弱引用原理

    weakMap为什么是弱引用原理

    这篇文章主要为大家介绍了weakMap为什么是弱引用原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • javascript实现二叉树遍历的代码

    javascript实现二叉树遍历的代码

    这篇文章主要介绍了javascript实现二叉树遍历的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论