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中的new的使用方法与注意事项
May 16 Javascript
广告切换效果(缓动切换)
May 27 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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单态设计模式(单例模式)实例
2014/11/18 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python实现的多线程端口扫描功能示例
2017/01/21 Python
python可视化实现代码
2019/01/15 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Python调用Redis的示例代码
2020/11/24 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
高职教师岗位职责
2013/12/24 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
2016党员入党决心书
2015/09/22 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript