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 相关文章推荐
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
js charAt的使用示例
Feb 18 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 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
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Angular2使用jQuery的方法教程
2017/05/28 jQuery
vue resource post请求时遇到的坑
2017/10/19 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
原生JS实现音乐播放器
2021/01/26 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python学习数据结构实例代码
2015/05/11 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
家长对学生的评语
2014/04/18 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
庆国庆活动总结
2014/08/28 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
导游词之天津古文化街
2019/11/09 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python