Bootstrap 标签页(Tab)插件

来源:互联网 发布:淘宝商品上架教程 编辑:程序博客网 时间:2024/05/24 07:09

遇到的问题  同用一套tab  没法控制tab选择和content同步展示

用法

您可以通过以下两种方式启用标签页:

  • 通过 data 属性:您需要添加 data-toggle="tab"  data-toggle="pill" 到锚文本链接中。

    添加 nav  nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav  nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式。

    <ul class="nav nav-tabs">   <li><a href="#identifier" data-toggle="tab">Home</a></li>...</ul>
  • 通过 JavaScript:您可以使用 Javscript 来启用标签页,如下所示:
    $('#myTab a').click(function (e) {  e.preventDefault()  $(this).tab('show')})

    下面的实例演示了以不同的方式来激活各个标签页:

    // 通过名称选取标签页$('#myTab a[href="#profile"]').tab('show') // 选取第一个标签页$('#myTab a:first').tab('show') // 选取最后一个标签页$('#myTab a:last').tab('show') // 选取第三个标签页(从 0 开始索引)$('#myTab li:eq(2) a').tab('show') 

0 0
原创粉丝点击