快速认识Javascript插件

导入的链接

    <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="jquery-3.3.1.slim.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

插件分类

Bootstrap4内置了许多插件，这些插件在Web应用开发中应用频率比较高，下面列出bootstrap插件支持的文件以及各种插件对应的js文件：
 警告框：alert.js。
 按钮：button.js。
 轮播：carousel.js。
 折叠：collapse.js。
 下拉菜单：dropdown.js。
 模态框：modal.js。
 弹窗：popover.js。
 滚动监听：scrollspy.js。
 标签页：tab.js。
 工具提示：tooltip.js。

2 安装插件

Bootstrap插件可以单个引入，方法是使用bootstrap提供的单个*.js文件；也可以一次性全部引入，方法是引入bootstrap.js或者boostrap.min.js。
部分bootstrap插件和CSS组件依赖于其他插件。如果需要单独引入某个插件时，请确保在文档中检查插件之间的依赖关系。
所有bootstrap插件都依赖于util.js，它必须在插件之前引入。如果要单独使用某一个插件，引用时必须要包含util.js文件。如果使用的是已编译bootstrap.js或者bootstrap.min.js文件，就没有必要再引入该文件了，因为其中已经包含了。
提示：util.js文件包括实用程序函数、基本事件以及CSS转换模拟器。util.js文件在bootstrap4源文件中可以找到，与其他插件在一个文件夹中。

3 调用插件

Bootstrap4提供了两种调用插件的方法，具体说明如下。
1.Date属性调用
在页面中目标元素上定义data属性，可以启用插件，不用编写JavaScript脚本。推荐首选这种方式。
2.JavaScript调用
Bootstrap插件也可以使用JavaScript脚本进行调用。

4 事件

Bootstrap4为大部分插件自定义事件。这些事件包括两种动词形式，不定式和过去式。
 不定式形式：例如show，表示其在事件开始时被触发。
 过去式形式：例如shown，表示在动作完成之后被触发。
所有不定式事件都提供了preventDefault()功能，这提供了在操作开始之前停止其执行的能力，从事件处理程序返回false也会自动调用preventDefault()。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault()  //停止显示模态框
})

按钮

1. 切换状态

添加data-toggle="button"属性，可以切换按钮的active状态，如果你预先需要切换按钮，必须将.active样式属性添加到<button>标签中。

<body class="container">
    <button type="button" class="btn btn-danger " data-toggle="button" autocomplete="off">
        切换状态按钮,预先加入按钮可加入.active类
    </button>
</body>

也可以JavaScript脚本形式实现切换效果。

<button type="button" class="btn btn-danger " autocomplete="off">
        切换状态按钮,去掉data-toggle="button" 用JS脚本实现
        是放在按钮上，颜色发生改变
    </button>
    <script>
        $(".btn").click(function(){
            $("this").button("toggle")
        })
    </script>

2 按钮式复选框和单选框

Bootstrap的.button样式也可以作用于其它元素，例如<label>上，从而模拟单选框、复选框效果。添加data-toggle="buttons"到.btn-group下的元素里，可以启用样式切换效果。预先选中的按钮需要手动将.active添加到<label>上。

1.按钮式复选框

按钮组 class="btn-group"；单击切换时变换深浅色 data-toggle="buttons"

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="checkbox" checked autocomplete="off">复选框 1
    </label>
    <!--label 元素不会向用户呈现任何特殊效果。
        不过，它为鼠标用户改进了可用性。如果您在 label 
        元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，
        浏览器就会自动将焦点转到和标签相关的表单控件上。-->
    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> 复选框 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> 复选框 3
    </label>
</div>

btn-group-toggle类实现类似按钮组的效果

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <!--btn-group-toggle类实现类似按钮组的效果-->
    <label class="btn btn-primary active">
        <input type="checkbox" checked autocomplete="off"> 复选框 1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> 复选框 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> 复选框 3
    </label>
</div>

2.按钮式单选框

单选框定义type="radio" name="options"

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> 单选框 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"> 单选框 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> 单选框 3
    </label>
</div>

单选框按钮组

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked>单选框 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"> 单选框 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> 单选框 3
    </label>
</div>

警告框

1. 关闭警告框

设计一个警告框，并添加一个关闭按钮，只需为关闭按钮设置data-dismiss="alert"属性即可自动为警告框赋予关闭功能。
使用JavaScript脚本来控制警告框关闭操作。

<div class="alert alert-warning fade show">
    <strong>警告提示！</strong> 程序中出现一个语法问题。
    <button type="button" class="close" data-dismiss="alert">
        <span>&times;</span>
    </button>
</div>

js脚本控制警告框

<body class="container">
<div class="alert alert-warning fade show">
    <strong>警告提示！</strong> 程序中出现一个语法问题。
    <button type="button" class="close">
        <span>&times;</span>
    </button>
</div>
</body>
<script>
    $(function(){
        //// 关闭警告框脚本
        $(".close").click(function(){
            $(".alert").alert("close")
        })
    })
</script>

2. 添加用户行为

Bootstrap4为警告框提供了两个事件，说明如下：
 close.bs.alert：当close函数被调用之后，此事件被立即触发。
 closed.bs.alert：当警告框被关闭以后，此事件被触发。
下列是一个警告框绑定模态框，当关闭警告框之前，将弹出一个模态框进行提示

div class="modal" id="Modal-test">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">提示</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">你确定要关闭警告框吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">是</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">否</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        $(".close").click(function(){
            $(this).alert("close")
        })
        $(".alert").on("close.bs.alert",function(e){
            $("#Modal-test").modal();
        })
    })
</script>

下拉菜单

1. 调用下拉菜单

下拉菜单插件可以为所有对象添加下拉菜单，包括按钮、导航栏、标签页等。调用下拉菜单有以下两种方法。
1.Data属性调用
在超链接或者按钮上添加data-toggle="dropdown"属性，即可激活下拉菜单交互行为。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
        下拉菜单
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">菜单项1</a>
        <a class="dropdown-item" href="#">菜单项2</a>
        <a class="dropdown-item" href="#">菜单项3</a>
    </div>
</div>

2.JavaScript调用
使用dropdown()构造函数可直接调用下拉菜单。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button">
        下拉菜单
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">菜单项1</a>
        <a class="dropdown-item" href="#">菜单项2</a>
        <a class="dropdown-item" href="#">菜单项3</a>
    </div>
</div>
<script>
    $(function(){
        $(".btn").dropdown();
    })
</script>

3.配置参数
可以通过data属性或JavaScript传递配置参数，参数如表11-1所示。对于data属性，参数名称追加到“data-”后面，例如：data-offset=""。

参数	类型	默认值	说明
offset	number	string	function
flip	boolean	True	允许下拉菜单在引用元素重叠的情况下翻转。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-offset="50,30" type="button">
        下拉菜单
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">菜单项1</a>
        <a class="dropdown-item" href="#">菜单项2</a>
        <a class="dropdown-item" href="#">菜单项3</a>
    </div>
</div>

2. 添加用户行为

事件	描述
show.bs.dropdown	调用显示下拉菜单的方法时触发该事件
shown.bs.dropdown	当下拉菜单显示完毕后触发该事件
hide.bs.dropdown	当调用隐藏下拉菜单的方法时会触发该事件
hidden.bs.dropdown	当下拉菜单隐藏完毕后触发该事件

<div class="dropdown" id="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
        下拉菜单
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">菜单项1</a>
        <a class="dropdown-item" href="#">菜单项2</a>
        <a class="dropdown-item" href="#">菜单项3</a>
    </div>
</div>
</body>
<script>
    $(function(){
        $("#dropdown").on("show.bs.dropdown",function(){
            $(this).children("[data-toggle='dropdown']").html("开始显示下拉菜单")
        })
        $("#dropdown").on("shown.bs.dropdown",function(){
            $(this).children("[data-toggle='dropdown']").html("下拉菜单显示完成")
        })
        $("#dropdown").on("hide.bs.dropdown",function(){
            $(this).children("[data-toggle='dropdown']").html("开始隐藏下拉菜单")
        })
        $("#dropdown").on("hidden.bs.dropdown",function(){
            $(this).children("[data-toggle='dropdown']").html("下拉菜单隐藏完成")
        })
    })
</script>

模态框（不懂）

1. 定义模态框

模态框是一个多用途的JavaScript弹出窗口，可以使用它在网站中显示警告窗口、视频和图片。
在使用模态框插件时，注意以下几点：
 弹出模态框是用HTML、CSS和JavaScript构建的，模态框被激活时位于其它表现元素之上，并从中删除滚动事件，以便模态框自身的内容能得到滚动。
 点击模态框的灰背景区域，将自动关闭模块框。
一次只支持一个模态窗口，不支持嵌套。
模态框内容包括三个部分：头部、正文和页脚，分别使用.modal-header、.modal-body和.modal-footer定义。
设计完成模态框结构后，需要为特定对象（通常使用按钮）绑定触发行为，才能通过该对象触发模态框。在这个特定对象中需要添加data-target="#Modal-test"属性来绑定对应的模态框，添加data-toggle="modal"属性指定要打开的模态框。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal-test">
    打开模态框
</button>

模态框的完整结构

<div class="modal fade" id="Modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">模态框标题</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">模态框正文</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

2. 模态框布局和样式

1.垂直居中
通过给

添加.modal-dialog-centered样式，来设置模态框垂直居中显示。

<div class="modal fade" id="Modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">模态框标题</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">模态框正文</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

2.设置大小
模态框除了默认大小以外，还有三种可选值。这三种可选值在响应断点处还可自动响应，以避免在较窄的视图上出现水平滚动条。通过给

添加.modal-sm、.modal-lg和.modal-xl样式，来设置模态框的大小。

<!-- 大尺寸模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">大尺寸模态框</button>
<div class="modal example-modal-lg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">大尺寸模态框</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                模态框正文
            </div>
        </div>
    </div>
</div>
<!-- 小尺寸模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".example-modal-sm">小尺寸模态框</button>
<div class="modal example-modal-sm">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">小尺寸模态框</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                模态框正文
            </div>
        </div>
    </div>
</div>

3.模态框网格
在

中嵌套一个

容器，在该容器中便可以使用bootstrap的网格系统，像在其他地方一样使用常规网格系统类。

<div class="modal" id="Modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">模态框网格</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 bg-success text-white">.col-md-4</div>
                        <div class="col-md-4 ml-auto bg-success text-white">.col-md-4 .ml-auto</div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 ml-md-auto bg-danger text-white">.col-md-3 .ml-md-auto</div>
                        <div class="col-md-4 ml-md-auto bg-danger text-white">.col-md-3 .ml-md-auto</div>
                    </div>
                    <div class="row">
                        <div class="col-auto mr-auto bg-warning">.col-auto .mr-auto</div>
                        <div class="col-auto bg-warning">.col-auto</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

4.添加弹窗和工具提示
Tooltips工具提示和popovers弹窗，可以根据需要放置在模态框中。当模态框关闭时，包含的任何工具提示和弹窗都会同步关闭。

<div class="modal" id="Modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">模态框标题</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-body">
                    <h5>弹窗</h5>
                    <p>单击这个<a href="#" role="button" class="btn btn-secondary popover-test" title="弹窗标题" data-content="弹窗的主体内容">button</a> 触发一个弹窗。</p><hr>
                    <h5>工具提示</h5>
                    <p>鼠标指针悬浮<a href="#" class="tooltip-test" title="链接一">链接一</a> 和 <a href="#" class="tooltip-test" title="链接二">链接二</a>触发工具提示。</p>
                </div>
                <script>
                    $(document).ready(function(){
                        //找到对应的属性类别，添加弹窗和工具箱提示
                        $('.popover-test').popover();
                        $('.tooltip-test').tooltip();
                    });
                </script>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

3. 调用模态框

模态框插件可以通过data属性或JavaScript脚本调用。
1.data属性调用
启动模态框无需编写JavaScript脚本，只需要在控制元素上设置data-toggle="modal"属性，以及data-target或href属性。data-toggle="modal"属性用来激活模态框插件，data-target或href属性用来绑定目标对象。
2. JavaScript调用
JavaScript调用直接使用modal()函数即可。下面为按钮绑定click事件，当单击该按钮时，为模态框调用modal()构造函数。

名称	类型	默认值	说明
backdrop	Boolean	True	是否显示背景遮罩层，同时设置单击模态框其他区域是否关闭模态框。默认值为true，表示显示遮罩层。
keyboard	Boolean	True	是否允许Esc键关闭模态框，默认值为true，表示允许使用键盘上的Esc键关闭模态框。
focus	Boolean	True	初始化时将焦点放在模态上。
show	Boolean	True	初始化时是否显示模态。默认状态表示显示模态框。

<body class="container">
<button type="button" class="btn btn-primary">
    打开模态框
</button>
<div class="modal" id="Modal-test">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">模态框标题</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">模态框正文</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        $(".btn").click(function(){
            $('#Modal-test').modal({
                backdrop:false
            });  //调用模态框
        });
    }) 
</script>

4. 添加用户行为

事件	说明
show.bs.modal	当调用显示模态框的方法时会触发该事件
shown.bs.modal	当模态框显示完毕后触发该事件
hide.bs.modal	当调用隐藏模态框的方法时会触发该事件
hidden.bs.modal	当模态框隐藏完毕后触发该事件

<button type="button" class="btn btn-primary" data-toggle="modal" data-backdrop="false" data-keyboard="false" data-target="#Modal-test">
    打开模态框
</button>
<div class="modal" id="Modal-test">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">模态框标题</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">模态框正文</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        $("#Modal-test").on("shown.bs.modal",function(){
            alert("模态框显示完成")
        })
        $("#Modal-test").on("hidden.bs.modal",function(){
            alert("模态框隐藏完成")
        })
    })
</script>

标签页

1 定义标签页

在使用标签页插件之前，首先来了解一下标签页的HTML结构。
标签页分为两个部分：导航区和内容区域。导航区使用bootstrap导航组件设计，在导航区内，把每个超链接定义为锚点链接，锚点值指向对应的标签内容框的ID值。内容区域需要使用tab-content类定义外包含框，使用tab-pane类定义每个Tab内容框。
最后，在导航区域内为每个超链接定义data-toggle="tab"，激活标签页插件。对于下拉菜单选项，也可以通过该属性激活它们对应的行为。

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#image1">图片1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#image2">图片2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#image3">图片3</a>
    </li>
    <li  class="dropdown nav-item">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">更多内容</a>
        <ul class="dropdown-menu">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#image4">图片4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#image5">图片5</a>
            </li>
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="image1"><img src="images/004.jpg" alt="" class="img-fluid"></div>
    <div class="tab-pane fade" id="image2"><img src="images/002.jpg" alt="" class="img-fluid"></div>
    <div class="tab-pane fade" id="image3"><img src="images/003.jpg" alt="" class="img-fluid"></div>
    <div class="tab-pane fade" id="image4"><img src="images/010.jpg" alt="" class="img-fluid"></div>
    <div class="tab-pane fade" id="image5"><img src="images/005.jpg" alt="" class="img-fluid"></div>
</div>

2 调用标签页

调用标签页插件有两种方法：
1.使用data属性
通过data属性来激活，不需要编写任何JavaScript脚本，只需要在导航标签或者导航超链接中添加data-toggle="tab"或者data-toggle="pill"属性即可。同时，确保为导航包含框添加nav和nav-tabs（或nav-pills）类。

待补

2.使用JavaScript脚本
通过JavaScript脚本直接调用，调用方法是在每个超链接的单击事件中调用tab("show")方法显示对应的标签内容框。
其中e.preventDefault();阻止超链接的默认行为，$(this).tab('show')显示当前标签页对应的内容框内容。
用户还可以设计单独控制按钮，专门显示特定Tab项的内容框。

待补

3 添加用户行为

<body class="container">

<ul class="nav nav-tabs" id="myTab">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#image1">图片1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#image2">图片2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#image3">图片3</a>
    </li>
    <li  class="dropdown nav-item">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">更多内容</a>
        <ul class="dropdown-menu">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#image4">图片4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#image5">图片5</a>
            </li>
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="image1">图片1</div>
    <div class="tab-pane fade" id="image2">图片2</div>
    <div class="tab-pane fade" id="image3">图片3</div>
    <div class="tab-pane fade" id="image4">图片4</div>
    <div class="tab-pane fade" id="image5">图片5</div>
</div>
</body>
<script>
    $(function(){
        $('#myTab a').on('click', function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
        $('#myTab a').on("show.bs.tab",function (e) {
            alert("旧的选项卡："+e.relatedTarget);    //旧的选项卡
            alert("将被激活的选项卡："+e.target);    //将要被激活的选项卡
        })
    })
</script>

努力拼搏吧，不要害怕，不要去规划，不要迷茫。但你一定要在路上一直的走下去，尽管可能停滞不前，但也要走。

相关阅读:
【C语言】23typedef
C#蓝牙开发之查找设备以及配对
 GridView获取隐藏列的值
 PDA(Windows Mobile)调用远程WebService
VS2008使用宏记录来实现自动增加注释信息
 CS 系统框架二[部分内容更新]
GridView里面嵌套RadioButton
.Net 以报表的形式加载SAP里面的数据
 取GridView的PagerTemplate里面的控件ID
《深入Ajax架构和最佳实践》读书笔记
原文地址：https://www.cnblogs.com/wkhzwmr/p/15114590.html