admin 管理员组

文章数量: 1184232


2024年3月10日发(作者：js解析xml文件)

多iframe使用tab标签方式添加、删除、切换的处理实例

紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案

如果采用iframe来切换显示内容的方式来展现办公Web。那么需要解决几个问题

标签需要和显示的iframe一一对应，当点击到某个tab页签的时候需要切换到

对应的iframe。

2.需要有新增、删除页签的tab功能。

3.在tab页签之间切换的时候需要有一个记录点击的页签的历史记录的功能。何用？

当你删除某个页签的时候，需要回溯到上一个页签。

4.不断添加页签，需要计算页签的宽度做适配。

本实例是这样做的

<div class="tabbable" id="tabs">

<!-- Tab标签列表 -->

<ul class="nav nav-tabs" id="myTab"></ul>

<!-- 显示内容列表，和Tab标签列表一一对应 -->

<div class="tab-content"></div>

</div>

如上,#myTab是用来保存Tab标签页的，.tab-content用来保存iframe页面列表。

下面举例说明里面的内容，例子中有两个Tab页，效果图如下

主要style样式表如下

View Code

标签内容如下 <div class="tabbable" id="tabs">

<!-- 页面标签列表 -->

<ul class="nav nav-tabs" id="myTab">

<li id="tab-0" class="">

<a data-toggle="tab" href="#tab-content-0" style="width:

padding-left: 10px;"> 首页 </a>

<i class="fa fa-times" onclick="deleteTab(0)"></i>

</li>

518px;


本文标签： 需要 标签 切换 内容 方式

版权声明：本文标题：多iframe使用tab标签方式添加、删除、切换的处理实例 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1710050804a555407.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。