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 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
javascript无刷新评论实现方法
May 13 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
微信小程序获取用户信息并保存登录状态详解
May 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
php网页后退不再出现过期
2007/03/08 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
使用python绘制常用的图表
2016/08/27 Python
Python多线程原理与用法详解
2018/08/20 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
2013年入党人员的自我鉴定
2013/10/25 职场文书
文明风采获奖感言
2014/02/18 职场文书
志愿者服务感言
2014/02/27 职场文书
现金出纳岗位职责
2014/03/15 职场文书
预备党员综合考察材料
2014/05/31 职场文书
七一党日活动总结
2014/07/08 职场文书
开展警示教育活动总结
2015/05/09 职场文书
Python绘制分类图的方法
2021/04/20 Python
Python 数据可视化之Matplotlib详解
2021/11/02 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL