jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

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

例子查看请演示查看.

截图如图所示:

jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

实现步骤:

几个需要注意的点:

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

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

2. 具体内容部分

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

<!-- 标题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>

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

上一篇:Js 实现tab切换效果


下一篇:APUE(4)---文件和目录 (2)