今天一個(gè)朋友叫幫做一個(gè)tab切換, 每一個(gè)tab內(nèi)容區(qū)域都是從后臺(tái)取出的數(shù)據(jù), 這些數(shù)據(jù)要用表格的形式顯示處理, 并且表格的內(nèi)容區(qū)域可以修改, 如下所示:

例子查看請(qǐng)演示查看.

截圖如圖所示:

實(shí)現(xiàn)步驟:

幾個(gè)需要注意的點(diǎn):

1. tab部分加一個(gè)data-id, 當(dāng)中的id與下面要顯示的具體內(nèi)容的tab-content的id一致.

• 標(biāo)題1
• 標(biāo)題2
• 標(biāo)題3

2. 具體內(nèi)容部分

標(biāo)題1
標(biāo)題2
標(biāo)題3

提交

提交

提交

3, 剛開(kāi)始讓所有的都隱藏, 只有添加了class="active"的才顯示.

.tab-content{

display: none;

}

.tab-content.active{

display: block;

}

4. 寫js:

點(diǎn)擊li標(biāo)簽對(duì)應(yīng)的tab時(shí):

$('.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;

}

});

每點(diǎn)擊一個(gè)li就發(fā)送一次請(qǐng)求:

/**

* 獲取tab1的內(nèi)容

* @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);

}

});

}

點(diǎn)擊各個(gè)不同的tab下面的提交按鈕時(shí):

/**

* tabContent1點(diǎn)擊提交

* @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('更新失敗');

}

});

});

總結(jié)

以上是生活随笔為你收集整理的bootstrap tabale 点击_jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。