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新手语法小结
Jun 15 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
jquery实现图片预加载
Dec 25 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Vue中component标签解决项目组件化操作
Sep 04 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
坏狼php学习 计数器实例代码
2008/06/15 PHP
php的大小写敏感问题整理
2011/12/29 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php实现的双向队列类实例
2014/09/24 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python机器学习库常用汇总
2017/11/15 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
python 实现控制鼠标键盘
2020/11/27 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
12月红领巾广播稿
2014/02/13 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
相亲活动方案
2014/08/26 职场文书