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

例子查看请演示查看.

截图如图所示:

实现步骤:

几个需要注意的点:

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

• 标题1
• 标题2
• 标题3

2. 具体内容部分

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 += '

'+

'

'+detail.title+''+

'

'+

'

';

});

$('#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('更新失败');

}

});

});