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 将元素显示在屏幕的中央的代码
Feb 27 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
vue实现在线翻译功能
Sep 27 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
详解PHP归并排序的实现
2016/10/18 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python处理数据,存进hive表的方法
2018/07/04 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Django实现简单的分页功能
2021/02/22 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
高级技校毕业生自荐信
2013/11/18 职场文书
党员违纪检讨书
2014/02/18 职场文书
租房协议书
2014/04/10 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers