### 一、前言 最近在写nav的table切换过程中发现一个诡异的现象，第一次加载过程中如果插件位置不在第一个，那么无法插件渲染。 其他需要html渲染的插件也同样会有问题，例如char.js、ueditor。 ### 二、过程 下图所示，是一个博客的table切换 [](http://zhanghao520.com "张浩博客table切换") [](http://zhanghao520.com "张浩博客图片上传") 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](http://www.zhanghao520.com "www.zhanghao520.com")，更多技术问题一起研究！ 未经允许不得转载：张浩博客 » Bootstrap使用table切换后js插件渲染失败的问题
评论前必须登录！
立即登录 注册