【广州前端】bootstrap常用组件(四)-标签页Tab插件 - 黑马程序员技术交流社区

Bootstrap为我们提供一个tab插件，可以快速的完成一个tab栏的标签页切换。

需要引入的文件有bootstrap的css样式文件。因为bootstrap是基于jquery的，所以要先引入jq文件，再引入bootstrap的js文件。

[HTML] 纯文本查看 复制代码

<link rel="stylesheet" href="lib/css/bootstrap.css">



<script src="lib/js/jquery.v1.12.4.js"></script>



<script src="lib/js/bootstrap.js"></script>

1. 通过data属性：

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

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

[HTML] 纯文本查看 复制代码

<!--  Bootstrap 标签样式 -->



   <ul id="myTab" class="nav nav-tabs">



        <li class="active">



            <a href="#home" data-toggle="tab">



                 传智-前端与移动开发



            </a>



        </li>



        <li><a href="#java" data-toggle="tab">javaEE</a></li>



         <li><a href="#ul" data-toggle="tab">UI设计</a></li>



    </ul>



    <div id="myTabContent" class="tab-content">



        <div class="tab-pane fade in active" id="home">



            <p>111111传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>



        </div>



        <div class="tab-pane fade" id="java">



            <p>22222传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>



        </div>



        <div class="tab-pane fade" id="ul">



            <p>33333传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>



        </div>



    </div>



<!--  Bootstrap 胶囊式样式 -->



     <ul id="myTab1" class="nav nav-pills">



        <li class="active">



            <a href="#home1" data-toggle="pill">



                 传智-前端与移动开发



            </a>



        </li>



        <li><a href="#java1" data-toggle="pill">javaEE</a></li>



         <li><a href="#ul1" data-toggle="pill">UI设计</a></li>



    </ul>



    <div id="myTabContent1" class="tab-content">



        <div class="tab-pane fade in active" id="home1">



            <p>111111传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>



        </div>



        <div class="tab-pane fade" id="java1">



            <p>22222传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>



        </div>



        <div class="tab-pane fade" id="ul1">



            <p>33333传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>



        </div>



    </div>

1. Bootstrap 标签样式效果

2. Bootstrap 胶囊式样式效果

2. 通过 JavaScript：可以使用 Javascript 来启用标签页，如下所示：

[JavaScript] 纯文本查看 复制代码

 $('#myTab a').click(function (e) {

e.preventDefault()

$(this).tab('show')

})

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

[JavaScript] 纯文本查看 复制代码

// 通过名称选取标签页



$('#myTab a[href="#profile"]').tab('show')



// 选取第一个标签页



$('#myTab a:first').tab('show')



// 选取最后一个标签页



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



// 选取第三个标签页（从 0 开始索引）



$('#myTab li:eq(2) a').tab('show')

【淡入淡出效果】

如果需要为标签页设置淡入淡出效果，添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容

[HTML] 纯文本查看 复制代码

<div class="tab-content">



    <div class="tab-pane fade in active" id="home">...</div>



    <div class="tab-pane fade" id="svn">...</div>



    <div class="tab-pane fade" id="ios">...</div>



    <div class="tab-pane fade" id="java">...</div>



</div>

该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。

[HTML] 纯文本查看 复制代码

 <p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>

<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>

<ul id="myTab" class="nav nav-tabs">

      <li class="active">

         <a href="#home" data-toggle="tab">

               传智-前端与移动开发

         </a>

      </li>

      <li><a href="#java" data-toggle="tab">javaEE</a></li>

      <li><a href="#ul" data-toggle="tab">UI设计</a></li>

</ul>

<div id="myTabContent" class="tab-content">

      <div class="tab-pane fade in active" id="home">

         <p>111111传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>

      </div>

      <div class="tab-pane fade" id="java">

         <p>22222传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>

      </div>

      <div class="tab-pane fade" id="ul">

         <p>33333传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>

      </div>

</div>

<script>

   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

      // 获取已激活的标签页的名称

      var activeTab = $(e.target).text();

      // 获取前一个激活的标签页的名称

      var previousTab = $(e.relatedTarget).text();

      $(".active-tab span").html(activeTab);

      $(".previous-tab span").html(previousTab);

});

</script>