一、前言
最近在写nav的table切换过程中发现一个诡异的现象，第一次加载过程中如果插件位置不在第一个，那么无法插件渲染。
其他需要html渲染的插件也同样会有问题，例如char.js、ueditor。
二、过程
下图所示，是一个博客的table切换
[图片上传失败...(image-13131c-1551685856698)]
[图片上传失败...(image-a2d9f0-1551685856698)]
- 上传图片我用的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>
- 我们可以查看bootstrap官网中说明
When showing a new tab, the events fire in the following order:
-
hide.bs.tab (on the current active tab)
-
show.bs.tab (on the to-be-shown tab)
-
hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
-
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
})
- 接下来我们在项目中使用
$('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，更多技术问题一起研究！
网友评论