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来实现了。

相关文章

  • JS的千分位算法实现思路

    JS的千分位算法实现思路

    本文为大家讲解下JS的千分位算法的具体实现,先去除空格,判断是否空值和非数;针对是否有小数点,分情况处理;感兴趣的朋友可以参考下
    2013-07-07
  • 微信小程序通过点击事件传参(data-)的操作示例

    微信小程序通过点击事件传参(data-)的操作示例

    微信小程序可以通过直接写 data-index="1" 进行数据的绑定 ,利用 bindtap 点击事件执行函数从而获取到参数信息,本文给大家介绍微信小程序通过点击事件传参(data-)的操作,感兴趣的朋友一起看看吧
    2023-12-12
  • js让一行页脚保持在底部

    js让一行页脚保持在底部

    所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边;
    2008-04-04
  • 利用Angularjs和Bootstrap前端开发案例实战

    利用Angularjs和Bootstrap前端开发案例实战

    这篇文章主要为大家介绍了利用Angularjs和Bootstrap前端开发案例实战,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript 回车 焦点切换

    JavaScript 回车 焦点切换

    回车键按下时,自动以Tab键方式在文本输入框之间进行焦点切换的JavaScript代码
    2009-06-06
  • JavaScript实现精美个性导航栏筋斗云效果

    JavaScript实现精美个性导航栏筋斗云效果

    这篇文章主要介绍了JavaScript实现精美个性导航栏筋斗云效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-10-10
  • 原生JS实现响应式瀑布流布局

    原生JS实现响应式瀑布流布局

    本文给大家分享的是使用原生的javascript实现的响应式的瀑布流布局的方法和源码,非常的实用,有需要的小伙伴可以参考下。
    2015-04-04
  • Javascript中引用类型传递的知识点小结

    Javascript中引用类型传递的知识点小结

    这篇文章主要给大家介绍了关于Javascript中引用类型传递的知识点,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • JavaScript如何使用Promise实现分批处理接口请求

    JavaScript如何使用Promise实现分批处理接口请求

    当我们在开发时遇到需要同时发起百条接口请求怎么办呢,本文主要来和大家介绍一下JavaScript如何使用Promise实现分批处理接口请求,需要的可以参考下
    2024-03-03
  • js获取当前年月日详细教程(看这一篇就够了)

    js获取当前年月日详细教程(看这一篇就够了)

    这篇文章主要给大家介绍了关于js获取当前年月日的相关资料,JavaScript内置的Date对象是获取当前日期最常用的工具之一,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论