Bootstrap使用table切换后js插件渲染失败的问题

一、前言

最近在写nav的table切换过程中发现一个诡异的现象，第一次加载过程中如果插件位置不在第一个，那么无法插件渲染。

其他需要html渲染的插件也同样会有问题，例如char.js、ueditor。

二、过程

下图所示，是一个博客的table切换

[图片上传失败...(image-13131c-1551685856698)]

[图片上传失败...(image-a2d9f0-1551685856698)]

1. 上传图片我用的webupload，点击图片时自动上传，更换图片，但是这个插件所在位置处于table切换的第二个，所以无论如何点击，插件无法渲染，因为bootstrap中table.js使用的是锚链接。href="#notice"

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class="active"><a href="#notice" aria-controls="notice" role="tab" data-toggle="tab">网站公告</a></li>

<li role="presentation" ><a href="#centre" aria-controls="centre" role="tab" data-toggle="tab">会员中心</a></li>

<li role="presentation"><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">联系站长</a></li>

</ul>

2. 我们可以查看bootstrap官网中说明

When showing a new tab, the events fire in the following order:

1. hide.bs.tab (on the current active tab)

2. show.bs.tab (on the to-be-shown tab)

3. hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)

4. shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

其中有四种事件类型,我们只要调用show.bs.tab这个事件就能在锚链接跳转时渲染js插件了

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

  e.target // newly activated tab

  e.relatedTarget // previous active tab

})

3. 接下来我们在项目中使用

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

                        //shown.bs.tab为tab选项卡高亮事件,

                        //这里需要注意！

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

                        var activeTab = $(e.target)[0].hash;

                        //hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）

                        if(activeTab === "#centre"){

                            //当相应的标签被点击时，进行图片上传渲染

                            //logo上传

                            /*init webuploader*/

                        }

}

完美解决！

三、总结

我们在使用插件过程中，会不断的发现坑点，特别加载多个jq插件的时候，多看文档会让我们解决问题的路上少走弯路。

欢迎关注我的博客 www.zhanghao520.com，更多技术问题一起研究！