今天一個朋友叫幫做一個tab切換, 每一個tab內容區域都是從后臺取出的數據, 這些數據要用表格的形式顯示處理, 并且表格的內容區域可以修改, 如下所示:

例子查看請演示查看.

截圖如圖所示:

實現步驟:

幾個需要注意的點:

1. tab部分加一個data-id, 當中的id與下面要顯示的具體內容的tab-content的id一致.

• 標題1
• 標題2
• 標題3

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

}

});

});

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。