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 相关文章推荐
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
vue实现购物车案例
May 30 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
MooTools 1.2介绍
2009/09/14 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
vue实现记事本功能
2019/06/26 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
pandas.cut具体使用总结
2019/06/24 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
物业客服专员岗位职责
2013/11/30 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
通知怎么写?
2019/04/17 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python