bootstrap-closable-tab

最新推荐文章于 2024-04-05 09:31:11 发布

weixin_46051617

最新推荐文章于 2024-04-05 09:31:11 发布

阅读量513

点赞数

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_46051617/article/details/107341732

版权

bootstrap-closable-tab是一个基于jQuery和Bootstrap的组件，提供可关闭的标签页功能。文章介绍了组件的示例、使用方法，并建议使用div而非iframe来实现子页面。此外，提到了一个名为closable-tab-div.js的替代方案，该方案适用于H5环境下，具有更多优点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap-closable-tab组件是一个可关闭标签页的组件。基于jquery和bootstrap

示例

1.gif

截屏示例是div实现方式，更流行的做法，抛弃iframe吧~

使用方法

引入bootstrap-closable-tab.js文件
在需要显示标签的位置如下代码

    <!-- 此处是相关代码 -->
    <ul class="nav nav-tabs" role="tablist">
    </ul>
    <div class="tab-content" style="width:100%;">
    </div>
    <!-- 相关代码结束 -->

添加标签

执行bootstrap-closable-tab.js中的方法closableTab.addTab(item)

参数item是一个数组 {id,name,url,closable}

id tab标签的id，不允许重复；

name tab便签上面显示的标题；

tab 标签页里面要加载的页面（不支持跨域访问);

closalbe boolean类型，是否显示关闭图标。

Example

    var item = {'id':'1','name':'首页','url':'son.html','closable':false};
    closableTab.addTab(item);

废弃子页面用iframe显示的方式吧

iframe展示子页面一度成为国内后台管理系统开发的主流。但是h5的出现，iframe的适应性有点不尽人意。closable-tab-div.js是另一种可关闭tab的子页面展示方式，很多优点只有你使用了才能发现。

GitHub 地址 bootstrap-cloable-tab

作者：蓝山牧童
链接：https://www.jianshu.com/p/32a6a3ff7c7b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。