jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据...
今天一个朋友叫帮做一个tab切换, 每一个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
转载于:https://www.cnblogs.com/xiangming25/p/6236780.html
jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据...相关推荐
- 写了一段VBA代码后, Excel每次保存时都弹出警告:”此文档中包含宏、Activex控件、XML扩展包信息“(office 2007)
前言:今天在写一段VBA代码之后,遇到一个问题, Excel每次保存时就报一个警告(使用的是office 2007): 此文档中包含宏.Activex控件.XML扩展包信息 用起来很不爽! ----- ...
- bootstrap tabale 点击_jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据...
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
- 如何让程序集在每次编译时自动产生不同的版本号
有的时候我们可能不光需要知道程序集的编译版本,还可能需要 知道关于编译的更详细的信息,比如大概编译的时间等. 那么怎么做呢,难道需要每次编译时都要改版本号吗, .net提供了一个简单的方法,把版本号如 ...
- bootStrap实现tab页切换
bootStrap可以简单方便的实现tab页面的切换 用法 通过data属性 可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=" ...
- html上下滚动切换顶端tab,jQuery实现Tab菜单滚动切换的方法
本文实例讲述了jQuery实现Tab菜单滚动切换的方法.分享给大家供大家参考.具体如下: 这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起 ...
- [转]如果我有jQuery背景,我应该如何切换到AngularJS的思维模式?
导言 stackoverflow上有一个人问了一个问题:如果我有jQuery背景,我应该如何切换到AngularJS的思维模式? 有一个回复非常经典,获得了两千多票. 为了让国内开发者也能领略到其中的 ...
- 使用Tab键控制切换网页光标位置
使用tabIndex属性可以很方便的控制光标位置,具体用法 <element tabindex="number"> 其中的数字: 1 ~ 32767( 2的15次方减1 ...
- html的tab页面切换刷新,切换tab页,页面局部刷新,地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
- 基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
最新文章
- MongoDB的安装及基本命令和pymongo的使用
- json loads No JSON object could be decoded 问题解决
- ubuntu16.04安装curl
- zabbix自定义key监控mysql主从同步超简单!
- java bom json,JSON字符串带BOM头ufeff
- java中的STL库_C++11 STL线程库实现一个简单的线程池
- 【算法导论】第7章快速排序
- 不好意思,00后黑客CEO登场了!
- ES6新特性_ES6对象添加Symbol类型属性---JavaScript_ECMAScript_ES6-ES11新特性工作笔记016
- 如何从零开始整一个高颜值 GitHub 小程序客户端?
- linux系统中归档管理器,深度商店应用归档管理器、KShutdown、7-Zip、California
- 关于ScreenToClient
- 计算机考研高数范围,考研数学一二三区别(大致考试范围)
- Python float基本用法
- NO.6网工学习之QINQ
- 没有配置java环境变量,为什么我java环境变量都还没有配置都可以运行java程序了...
- 网页游戏小游戏云开发的心得
- 小白学java之车辆管理系统,超基础!
- 微雪树莓派PICO笔记——7. SPI(串行外设接口)
- vc读取北通手柄按键_噬血代码手柄怎么操作 噬血代码北通手柄按键功能详解-游侠网...
热门文章
- Linux中搭建一个ftp服务器详解
- [转载]Java数据库设计中的14个技巧
- 第十六课、Qt对象间的父子关系------------------狄泰软件学院
- ArcSDE初学者需要弄清楚的几个问题(转载)
- iOS 在UILabel显示不同的字体和颜色(转)
- DM6467T开发板领航——dmai经验谈
- ubuntu下安装vmtools失败,提示The path is not a valid path to the 3.5.0-17-generic kernel headers的解决办法...
- Android Service和Binder、AIDL
- [转载] 杜拉拉升职记——20 两位同僚
- Linux配置汇总上(北大青鸟Linux课程学习总结)