【一点一滴Bootstrap】标签页Tab

       标签页Tab是一种常用的导航元素，除此之外我们也可以将它设置成一个页面容器放置同类功能的页面

一、标签页的使用

1. 设置data属性

       在html标签中，添加data-toggle=“tab”或data-toggle=“pill”，再在 href 中加入要展示的标签页。

       1）将 nav 和 nav-tabs 类添加到ul 中，将会应用 Bootstrap标签样式

       2）添加 nav 和 nav-pills 类到ul 中，将会应用 Bootstrap胶囊式样式

       （标签页也可通过js加载）

2. 创建标签页内容

       每个标签页都可当做一个单独的页面来设计，这点和模态框类似，然后只要与href的链接值对应起来就可以使用了。

二、实例：

1. 页面效果：

2.  页面上的触发点：

        

            Selenium Attribute
        
        

            ToRun
        
        

            Status
        
    

a标签的样式

3. 触发的标签页：

    

        

            Add
            Save
        
        
    
    

        

            添加行
            保存
        
        
    
    

        

            添加行
            保存
        
        
    

4. js中的事件：

$(function(){
    //查询缓存数据，根据缓存确定显示哪个Tab标签
    if(sessionStorage.getItem("keyTab")=="run"){
        $('#myTab li:eq(1) a').tab('show'); //从 0 开始索引,打开第二个标签
    }else if(sessionStorage.getItem("keyTab")=="status"){
        $('#myTab a:last').tab('show')
    }
    sessionStorage.removeItem("keyTab");//清除keyTab的值
});

三、标签页使用简述

1.属性

       data-toggle：“tab”，表明触发一个标签页

       data-target：触发对象的id或class等，表明要触发的标签页（或者使用href进行定位）

2.方法

       $().tab：用于激活标签页元素和内容容器，需要用一个data-target或者href指向DOM节点。

使用方法：

$(function () {
    $('#myTab a:last').tab('show')
  })

3. 事件

       show.bs.tab：在标签页显示时触发，但是必须在新标签页被显示之前。

       shown.bs.tab：在标签页显示时触发，但是必须在某个标签页已经显示之后。