jquery+bootstrap實現tab切換, 每次切換時都請求數據, 點擊提交分別向不一樣的地址提交數據

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

例子查看請演示查看.git

截圖如圖所示:github

 

 

實現步驟:

幾個須要注意的點:json

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

<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>this

 

2. 具體內容部分spa

<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>code

<!-- 標題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>orm

 

3, 剛開始讓全部的都隱藏, 只有添加了class="active"的才顯示.htm

.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

相關文章
相關標籤/搜索