jquery.idTabs 选项卡使用示例代码


Posted in Javascript onSeptember 03, 2014

idTabs是基于Jquery编写封装的一个插件,主要用于实现选项卡功能,它操作简单,只需到官网:http://www.sunsean.com/idTabs/下载插件JS脚本文件,并引用到网站中即可

<script src="js/jquery.idTabs.min.js" type="text/javascript"></script>

页面HTML布局及调用如下:

<div id="tabsbox" class="tabsbox">
<ul>

<li><a href='#tab0' class='selected'>技术简介</a></li>

<li><a href='#tab1' class=''>技术优势</a></li>

<li><a href='#tab2' class=''>技术路线</a></li>

<li><a href='#tab3' class=''>服务流程</a></li>

<li><a href='#tab4' class=''>样本要求</a></li>

</ul>
<div class="tabscont">

<div id='tab0'>1依托自主研发的技术平台,可为广大科研工作者提供常规测序服务和特色测序服务,为您的科研助一臂之力!</div>

<div id='tab1'>2依托自主研发的技术平台,可为广大科研工作者提供常规测序服务和特色测序服务,为您的科研助一臂之力!</div>

<div id='tab2'>3依托自主研发的技术平台,可为广大科研工作者提供常规测序服务和特色测序服务,为您的科研助一臂之力!</div>

<div id='tab3'>4依托自主研发的技术平台,可为广大科研工作者提供常规测序服务和特色测序服务,为您的科研助一臂之力! Text></div>

<div id='tab4'>511111111依托自主研发的技术平台,可为广大科研工作者提供常规测序服务和特色测序服务,为您的科研助一臂之力!</div>

</div>
</div>
<script type="text/javascript">
$("#tabsbox ul").idTabs("tabs0");
</script>

按照官网提示,编写以上代码就应该可以实现选项卡了,但遗憾的是,显示出来的效果根本就不是我所要的选项卡,经过分析找到原因,原来是缺少CSS样式支持,然而官网并没有提供相关的CSS样式文件下载,这样就只能自己写了:

<style type="text/css">
.tabsbox ul {border-bottom:1px solid #dce6e7;}
.tabsbox ul li {display:inline-block;border:1px solid #dce6e7;border-bottom:none;
line-height:30px;height:30px;width:80px; text-align:center;margin-right:10px;}
.tabsbox ul li a.selected {background-color:#fff;display:block;margin:0px;padding-bottom:5px;font-weight:bold;}
.tabsbox ul li a {text-decoration:none;}
.tabscont {margin-top:10px;}
</style>

添加了CSS样式效果之后,效果也就出来了,如下图示:

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
微信小程序工具函数封装
Oct 28 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 #Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 #Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 #Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 #Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 #Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 #Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 #Javascript
You might like
基于PHP对XML的操作详解
2013/06/07 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
django 将model转换为字典的方法示例
2018/10/16 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
商场中秋节广播稿
2014/01/17 职场文书
元旦联欢会主持词
2014/03/26 职场文书
《长征》教学反思
2014/04/27 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
家长学校工作方案
2014/05/07 职场文书
倡议书格式及范文
2015/04/29 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL