今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示:

例子查看请演示查看.

截图如图所示:

实现步骤:

几个需要注意的点:

1. tab部分加一个data-id, 当中的id与下面要显示的具体内容的tab-content的id一致.

<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" data-id="tabContent1"><a href="#">标题1</a></li>
<li role="presentation" data-id="tabContent2"><a href="#">标题2</a></li>
<li role="presentation" data-id="tabContent3"><a href="#">标题3</a></li>
</ul>

2. 具体内容部分

<div class="tabs-contents">
<!-- 标题1内容区域 -->
<div class="tab-content active" id="tabContent1">
<table class="table table-striped">
<tbody>
<tr>
<td>标题1</td>
<td><input type="text" class="form-control" name="" placeholder="请输入内容" value="content1"></td>
</tr>
<tr>
<td>标题2</td>
<td><input type="text" class="form-control" name="" placeholder="请输入内容" value="content2"></td>
</tr>
<tr>
<td>标题3</td>
<td><input type="text" class="form-control" name="" placeholder="请输入内容" value="content3"></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" id="tabSubmit1">提交</button>
</div>

<!-- 标题2内容区域 -->
<div class="tab-content" id="tabContent2">
<table class="table table-striped">
<tbody></tbody>
</table>
<button type="button" class="btn btn-primary" id="tabSubmit2">提交</button>
</div>
<!-- 标题3内容区域 -->
<div class="tab-content" id="tabContent3">
<table class="table table-striped">
<tbody></tbody>
</table>
<button type="button" class="btn btn-primary" id="tabSubmit3">提交</button>
</div>
</div>

3, 刚开始让所有的都隐藏, 只有添加了class="active"的才显示.

.tab-content{
display: none;
}
.tab-content.active{
display: block;
}

4. 写js:

点击li标签对应的tab时:

$('.nav-tabs li').click(function(){
　　$(this).addClass('active').siblings().removeClass('active');
　　var _id = $(this).attr('data-id');
　　$('.tabs-contents').find('#'+_id).addClass('active').siblings().removeClass('active');

　　switch(_id){
　　　　case "tabContent1":
　　　　　　getTabContent1();
　　　　　　break;
　　　　case "tabContent2":
　　　　　　getTabContent2();
　　　　　　break;
　　　　case "tabContent3":
　　　　　　getTabContent3();
　　　　　　break;
　　　　default:
　　　　　　getTabContent1();
　　　　　　break;
　　}
});

每点击一个li就发送一次请求:

/**

* 获取tab1的内容
* @return {[type]} [description]
*/
function getTabContent1(){
　　$.get('../json/table1.json',function(response){
　　console.log("response:====");
　　console.log(response);
　　if(response.code === 10000){
　　　　var data = response.data,
　　　　tableList = '';
　　　　data.forEach(function(detail){
　　　　　　tableList += '<tr>'+
　　　　　　　　　　'<td>'+detail.title+'</td>'+
　　　　　　　　　　'<td><input type="text" value="'+detail.content+'" class="form-control" name="" placeholder="请输入内容"></td>'+
　　　　　　　　　　'</tr>';
　　　　　　　　});
　　　　　　$('#tabContent1').find('tbody').html(tableList);
　　　　}
　　});
}

点击各个不同的tab下面的提交按钮时:

/**
* tabContent1点击提交
* @param {[type]} ){ var tabContent1 [description]
* @return {[type]} [description]
*/
$('#tabSubmit1').click(function(){
　　var tabContent1 = $('#tabContent1');
　　var trs = tabContent1.find('tr');
　　params = [];
　　trs.each(function(index,tr){
　　　　var obj = {
　　　　　　title:tabContent1.find('tr').eq(index).children().eq(0).html(),
　　　　　　content:tabContent1.find('tr').eq(index).children().eq(1).find('input').val()
　　　　};
　　　　params.push(obj);
　　});
　　console.log("params:====");
　　console.log(params);
　　$.post('',params,function(response){
　　　　if(response.code === 10000){
　　　　　　alert('更新成功');
　　　　}else{
　　　　　　alert('更新失败');
　　　　}
　　});
});

所有的代码的源代码, 请查看这里 https://github.com/xiangming25/tab_content