<div id="divTab" style="width:500px;">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td valign="bottom" align="left" width="100%">
<UL class="tabs">
<LI class="tabspace"></LI>
<LI id="tab1" onclick="TabSwitch('tab1')" class="selectedTab">卡品资源管理</LI>
<LI class="tabspace"></LI>
<LI id="tab2" onclick="TabSwitch('tab2')">渠道管理</LI>
<LI class="tabspace"></LI>
<LI id="tab3" onclick="TabSwitch('tab3')">酬金管理</LI>
</UL>
</td>
</tr>
<tr>
<td id="tabContent" height="300" align="center">
卡品资源管理
</td>
</tr>
</table>
</div>
<script language="javascript">
function TabSwitch(selectedTab){
//1、找ID为divTab的元素;2、找className为tabs的所有LI元素(排除className为tabspace的LI元素);3、清除所有class
jQuery("#divTab .tabs LI[class!='tabspace']").removeClass();
//为当前选中的tab设置class
jQuery("#"+selectedTab).addClass("selectedTab");
//取得当前选中tab里的文本内容
var tabText = jQuery("#"+selectedTab).text();
//当tab改变时,相应的内容也跟着改变
jQuery("#tabContent").empty();
jQuery("#tabContent").append(tabText);
}
</script>
CSS样式:
看附件的代码
实例源代码:
分享到:
相关推荐
本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法。分享给大家供大家参考。具体如下: DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,...
jQuery分页图片切换插件jPages是一款自动为图片列表分页,支持点击分页切换,支持键盘方向键切换,支持鼠标滚动切换,支持添加css3动画,默认切换动画为淡入显示,兼容所有主流浏览器!
一直想自己做个博客网站,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的...
1、引入 jquery.js、bootstrap-table.js、bootstrap-table-treegrid.js、jquery.treegrid.js 以及相应的 css 文件:bootstrap.css、bootstrap-table.css、jquery.treegrid.css; 2、后台传到前台的 json 必须含有 id...
本文实例讲述了Bootstrap table 服务器端分页功能实现方法。分享给大家供大家参考,具体如下: bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端bootstrap+...
pui 是一款基于jQyery开发的插件库。目前线上稳定使用已有2年多,丰富的接口,简单明了的调用方式... 插件库封装了布局、表单元素、表单校验、弹窗、toast、气泡pop、tab切换、日历时间、分页、表格、树、css命名等功能
css之float实现作业实例 css之display样式 css之内外边距 本周作业以及思路 第15周 上节内容答疑 上节内容回顾 CSS内容补充之position CSS内容补充之overflow CSS内容之hover CSS内容之background 初始javaScript ...
自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 二、如何使用 在做后台的时候并没有美工...
使用场景:不使用Django的模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。 本人做的是一个表格监控页面,该页面中的table内容每5s刷新一次。 注意:这种方式非长连接...
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本...
+修正IE7下Grid分页速度慢(feedback:youwei, StevenGuan, hazardvn, gavindou, ttjacky)。 -实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...
Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。 1、所需要的库: bootstrap.min.css bootstrap-table.css ...
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。目前在github上已经有2600多个Star,可见...
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。目前在github上已经有2600多个Star,...
第一章 ExtJs大比拼JQuery:Dom文档操作 3 一、选择器 4 二、属性 8 四、筛选 10 五、文档处理 11 六、CSS 13 七、事件 14 第二章 ExtJs对js基本语法扩展支持 16 一、动态引用加载 16 二、对类的封装 17 三、基本...