后台管理系统带关闭的选项卡，多标签页功能 适配bootstrap3和4 Bootstrap Hover Dropdown

眼看着是不是很熟悉，其实基本大部门后台管理系统都有这个功能，使用iframe实现展示标签页面。

主要功能：标签页点击，添加标签页，向左滚动标签页，向右滚动标签页，刷新当前标签页，关闭当前标签页，关闭其他标签页，关闭全部标签页，标签页删除

今天我们就来破析下具体的实现原理：

一、标签页点击：点击标签，要将当前标签置为选中，将其他标签设置为非选中，当前标签如果在非正常标签区域内还需要对标签页进行位置适配。

分三种情况：

1.标签页在正常区域内

点击后

2.标签区域左侧标签页出现一半（需要将当前标签页的左侧与标签区域左侧对齐）

点击后

3.标签区域右侧标签页出现一半（需要将当前标签页的右侧与标签区域右侧对齐）

点击后

二、添加标签页：向标签区域添加标签页（根据某种条件判断是否存在此标签页），将此标签页设置为选中，将其他标签设置为非选中，如果新标签页位置超出标签区域还要进行位置匹配。

分三种情况：

1.新标签页处于正常标签区域：

2.新标签页超出了正常标签区域（需要将当前标签页的右侧与标签区域右侧对齐）：

三、向左滚动标签页：计算规则语言上不太好表述，可以关注下面具体代码。

四、向右滚动标签页：计算规则语言上不太好表述，可以关注下面具体代码。

五、标签页删除：根据当前标签页获取下一个选中标签页，设置下一个选中标签页，移除当前标签页及iframe。

六、刷新当前标签页：获取当前选中标签页，重新加载对应iframe的src进行iframe刷新，具体可关注代码。

七、关闭当前标签页：触发当前标签页的删除事件。

八、关闭其他标签页：移除其他标签页及iframe（第一个标签页及iframe不可移除），然后触发当前标签页的点击事件。

九、关闭全部标签页：移除所有标签页（第一个标签页及iframe不可移除），然后触发第一个标签页的点击事件。

下面附上具体的代码：

1.页面代码：tabspage.html

View Code