Bootstrap Js选项卡

Bootstrap Js选项卡

---

选项卡的组成与布局

（选项卡组件、底部可切换的选项卡面板）

1）新建一个web项目ch24，把之前的css、js等文件拷贝过来。

2）布局选项卡实例

3）运行效果

---

声明式用法

1.增加data自定义属性来触发选项卡的js插件

<div class="container">

   <!--选项卡-->

<ul class="nav nav-tabs">

 <li><a href="#pan1" data-toggle="tab">搜索</a></li>

          //data-toggle="tab"设置 选项卡和对应的面板之间有一个关联

  <li><a href="#pan2"  data-toggle="tab">常规</a></li>

          //当单击选项卡“搜索、常规或者查看”时会显示相应的面板

  <li><a href="#pan3"  data-toggle="tab">查看</a></li>

 </ul>

 <!--面板-->

<div class="tab-content">

//每个面板需要给一个id，第一个面板设置成active，表示默认选中

  <div class="tab-pane active" id="pan1">

   搜索面板 搜索面板 搜索面板 搜索面板 搜索面板 搜索面板 搜索面板 搜索面板

        </div>

        <div class="tab-pane" id="pan2">

         常规面板常规面板常规面板常规面板常规面板常规面板常规面板

        </div>

         <div class="tab-pane" id="pan3">

         查看面板查看面板查看面板查看面板查看面板查看面板

        </div>

      </div>

  </div>

2.运行效果

3.同样，我们可以用胶囊这种模式

4.运行效果

（我们设置了fade渐变的样式，当面板里面的内容较多的时候效果会更明显。）

---

Javascript用法

1.Javascript用法实例

（在头文件中添加下列代码）

<script language="JavaScript">

     $(function(){

    

  $('.nav a').click(function (e) {

//类选择器里面有nav，选中nav里面的<a>标签，设置<a>标签里面的点击响应事件

  e.preventDefault();

  $(this).tab('show')

//调用tab里面的show来显示这个面板

});

$("#show2").click(function(){

$("#cgui").tab("show");

});

     });

    

</script>

注意：这里我们把data-toggle自动触发js事件给去掉了，去掉后再运行就没有效果了也就是面板间不进行切换。所以我们要通过上面的JavaScript语句来实现面板之间的切换。

例如： <li><a href="#pan2" id="cgui">常规</a></li>

      

当单击“显示常规”按钮时，我们需要把常规面板的内容显示出来

2.运行效果

(此时，点击“显示常规”按钮相当于你点击“常规”选项卡）

---

事件

1.设置事件

 <script language="JavaScript">

$(function(){

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

 // e.target // newly activated tab

 // e.relatedTarget // previous active tab

     var newobj=e.target.innerHTML;

     $("#testshow").html(newobj);

});

     });

    

</script>

解释：a[data-toggle="tab"]表示选择所有的<a>标签，并向所有的data-toggle属性的值是tab，就相当于选中了选项卡的这三个<a>标签。“on”后面表示当这三个选项卡对应的panel显示对应的面板时，就触发这个事件。e.target就是你当前激活了哪个选项卡，返回的就是那个对象。

2.运行效果