2024年6月5日发(作者：)

多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;