bootstrap如何实现可关闭的tab标签页效果?

bootstrap如何实现可关闭的tab标签页效果?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

可以在页面中引用bootstrap-closable-tab插件来实现可关闭的tab标签页效果。

bootstrap-closable-tab组件是一个可关闭标签页的组件;基于jquery和bootstrap。【相关教程推荐: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

更多bootstrap的相关知识,可访问:web前端自学!!

以上就是bootstrap如何实现可关闭的tab标签页效果?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Bootstrap 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏