上一篇教程中我们介绍了如何实现菜单以及菜单间的联动功能，那点了菜单中的一个选项之后页面该如何展示呢？以及，打开了多个页面，页面之间如何切换呢？这篇教程和大家一起学习如何实现这两个，也就是下面这个效果：
一、Tab分页和切换的需求
按照我们前面教程中提到的以需求驱动开发，我们要实现Tab分页就先分析清楚具体的需求：
- 点击左侧菜单时，在Tab栏增加一个tab
- 点击左侧菜单时，调用该菜单对应的页面返回到正文部分
- 点击tab时，将该tab背景色更改为蓝色
- 点击tab时，将其它tab背景色更改为灰色
- 点击tab时，将该tab对应的页面内容展示到正文部分
- 点击tab上的关闭按钮时，Tab栏去除当前tab
- 点击tab上的关闭按钮时，将该tab左侧的tab背景色更改为蓝色
- 点击tab上的关闭按钮时，将该tab左侧的tab对应的页面展示到正文部分
- 为了保证所有tab都关闭时依然有内容展示在正文部分，将"仪表盘"tab固定在Tab栏最左侧，并且该tab没有关闭按钮
二、Tab分页实现的关键问题
上文中我们分析了Tab分页的需求，需求分析出来了开发就有了明确的目标和方向，并且思路也可以逐步厘清。不过，功能实现起来需要完成几个关键点：
- 点击左侧菜单时，Tab栏中如何增加一个对应的tab？
- 点击左侧菜单时，正文部分如何加载相应的页面？
- 点击tab标签时，正文部分如何加载相应的页面？
要解决这三个关键点其实也就是解决三个页面组件之间如何进行关联和联动的问题，那怎么解决这3个问题呢？可以参考下面的解决方案：
- Tab栏使用<ul><li>实现，一个tab标签就是一个<li>节点
- 增加或删除tab标签时就可以通过append和remove <li>来实现
- 左侧菜单中设置一个包含URL的属性，当点击时，触发chooseMenu()函数
- chooseMenu()函数获取当前菜单指定的URL，调用该URL加载相应的页面到正文处
- chooseMenu()函数获取当前菜单指定的URL，在Tab栏中新增一个<li>，并将该URL写入到新增的<li>属性中
- 当点击Tab栏中的tab时，触发chooseTab()函数
- chooseTab()函数获取当前tab中指定的URL，调用该URL加载相应页面到正文处
下面我们来看一下具体如何编码实现Tab分页和切换。
三、Tab分页关键代码
chooseMenu()方法
function chooseMenu(e) {
//点击左侧菜单后右侧加载菜单内容
var url = $(e).attr('data');
//空格全部替换
var m_icon = $(e).children().attr('class').replace(new RegExp(' ','g'),'%20');
url += '?m_icon=' + m_icon;
if (url != '' && url != undefined) {
$('#container').load(url);
}
//处理tab栏
var tabName = $(e).text().trim();
var tabpanelContent = $('#tabpanel-content').text();
var children = $('#tabpanel-content').children();
//所有tab置灰
turnTabs2Gray();
//添加tab
if (tabpanelContent.indexOf(tabName) < 0) {
$('#tabpanel-content').append('<li class="tabpanel-content-item" style="background-color:#3aa0ff" οnclick="chooseTab(this)" data="' + url + '"> ' + tabName + '<a href="javascript:void(0)" οnclick="closeTab(this)"><i class="fa fa-close"></i></a></li>');
} else {
for (let i = 0; i < children.length; i++) {
let child = children[i];
if (child.innerText.indexOf(tabName) > -1) {
child.style.backgroundColor = "#3aa0ff";
}
}
}
}chooseTab()方法
//选中tag
function chooseTab(e) {
var url = $(e).attr('data');
if (url != '' && url != undefined) {
$('#container').load(url);
}
//所有tab置灰
turnTabs2Gray();
$(e).css('background-color', '#3aa0ff');
stopPropagation();
}turnTabs2Gray()方法
//将所有tab置为非选中状态（灰色）
function turnTabs2Gray() {
var children = $('#tabpanel-content').children();
for (let i = 0; i < children.length; i++) {
let child = children[i];
child.style.backgroundColor = '#aaaaaa';
}
}stopPropagation()方法，这个方法很关键，不然会报错
//阻止事件向父元素冒泡
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}四、本篇总结
要实现Tab分页并不难，需要分析清楚需求，然后按需求一步步实现，在编码的过程中难免遇到各种问题，欢迎加群交流呀：584017112（CSS样式定义和相关代码也可以在群里获取哦o(∩_∩)o ）
