bootstrap菜鸟教程:Tab页签切换实例代码

图标

豆瓜

豆瓜网

豆瓜网专栏

豆瓜 图标 2021-04-08 10:54:13

关于$().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菜鸟教程
图标 图标

豆瓜

豆瓜网

豆瓜网专栏

  • 高德是个会“套路”的老司机

    图标
    卤卤 图标 · 今天 15:30:14 · 6浏览
  • 跨境电子商务报告详解

    图标
    卤卤 图标 · 今天 15:23:53 · 12浏览
  • 炒股赚了100万+是怎么赚到的

    图标
    卤卤 图标 · 今天 15:21:08 · 9浏览
  • 全部评论

    豆瓜

    豆瓜网

    豆瓜网专栏

  • ubuntu下载安装说明
  • linux查看nginx路径目录说明
  • 正则不区分大小写说明
  • 菜鸟教程mysql:数据查询语言(DQL)与...
  • redis集群配置;redis-cluste...
  • 我来说两句