很多网站后台或者B/S结构的应用系统，经常会有这样的功能：左侧是导航菜单，点击菜单后会在右侧主区域以页签（也可称为选项卡）的形式打开页面，然后再点击第二个个菜单，右侧主区域会打开第二个页签来显示页面。如果对这个功能不太熟悉的话，可以去看一下Web版的邮箱系统（比如什么浪什么易之类的）。那今天分享的案例就是教大家使用中继器与内联框架实现网站后台的多页签功能。

1、原型解析

这个功能看起来简单，但如果深入探究就会发现很多逻辑问题。

问题1：点击菜单，在主区域显示该菜单对应的页签和页面。

• 扩展1：如果该菜单对应的页面未打开，则在新页签中打开页面；
• 扩展2：如果该菜单对应的页面已打开但未显示，则在原页签中显示页面；
• 扩展3：如果该菜单对应的页面已打开且已显示，则不进行任何操作。

问题2：页签和页面需要对应同步显示。

问题3：当打开多个页签之后，点击页签可以切换对应的页面显示。

问题4：当前显示的页面对应的页签需要突出显示。

问题5：点击页签上的关闭图标可以同步关闭页签及对应的页面。

• 扩展1：如果关闭的是当前显示的页面，关闭后显示上一个打开的页面；
• 扩展2：如果关闭的不是当前显示的页面，关闭后仍然显示当前页面。

2. 设计思路

这个功能整体包含三个部分：菜单部分、页签部分、显示页面的部分，我们来思考一下这三个部分分别用什么元件来实现。

• 针对菜单部分：可选的元件很多，在此不一一列举，只要是能点击的元件基本就可以，但使用不同元件的结果就是过程复杂程度不同以及灵活程度不同。但考虑到原型的通用性，不同情况下菜单项是不同的，于是考虑使用更为灵活的中继器元件来做菜单。
• 针对页签部分：因为这一部分会涉及到页签的动态增减，所以毫不犹豫选择中继器。

针对显示页面的部分：由于要跟随不同的菜单或页签来显示不同的页面，所以基本也是动态显示，可以考虑的元件有三种方案，一是内联框架，二是动态面板+内联框架，三是中继器+内联框架，因为要显示页面，所以内联框架是必不可少的。那这三种方案如何选择呢？通过简单对比，可以发现第三种方案比第一种方案适用范围更广，比第二种方案配置更加简单，所以采用第三种方案。

那么三部分要使用的元件都确定之后，接下来就是在此思路的基础上去实践（踩坑）了。

本案例中三个部分，全部使用中继器来实现，好处则是配置简单，灵活度高，可复用性强。如果你尝试了其他元件，你就会理解使用中继器真的是一劳永逸。

3. 制作过程