今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示:
例子查看请演示查看.
截图如图所示:
实现步骤:
几个需要注意的点:
1. tab部分加一个data-id, 当中的id与下面要显示的具体内容的tab-content的id一致.
2. 具体内容部分
标题1 | |
标题2 | |
标题3 |
提交
提交
提交
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('更新失败');
}
});
});