idTabs基于JQuery的根据URL参数选择Tab插件


Posted in Javascript onApril 11, 2012

为了做这件事,除了jquery库和idTabs插件,我们还需要下载一个用来搞URL的插件:jquery.url.js,传送门:https://github.com/allmarkedup/jQuery-URL-Parser
(上述链接可能有错,如不能使用,可以到这里下载)
三水点靠木提供idtabs打包下载 https://3water.com/jiaoben/43086.html
Tab菜单的HTML代码这样写,每个tab的div自己搞定,不发出来浪费页面了:

<div class="tabmenu"> 
<ul> 
<li><a href="#idTab1">Dashboard</a></li> 
<li><a href="#idTab2">Tracker</a></li> 
<li><a href="#idTab3">Documents</a></li> 
<li><a href="#idTab4">Collaboration</a></li> 
<li><a href="#idTab5">Knowledge Mapping</a></li> 
</ul> 
</div>

注意,一定不要给ul加class=”idTabs”,也就是不要用SunSean官网上的无javascript的写法。
脚本部分这样写:
<script type="text/javascript"> 
$(document).ready(function () { 
var tabToSelect = jQuery.url.param("tab"); 
if (null == tabToSelect || "" == tabToSelect) { 
//alert("Parameter 'tab' is null or empty\nAuto selecting idTab1"); 
tabToSelect = "idTab1"; 
} 
//alert("Selecting: " + tabToSelect); 
$(".tabmenu ul").idTabs(tabToSelect); 
}); 
</script>

有图有真相:

idTabs基于JQuery的根据URL参数选择Tab插件

idTabs基于JQuery的根据URL参数选择Tab插件

idTabs基于JQuery的根据URL参数选择Tab插件

Javascript 相关文章推荐
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 #Javascript
广泛收集的jQuery拖放插件集合
Apr 09 #Javascript
深入分析js中的constructor和prototype
Apr 07 #Javascript
浅谈javascript中的作用域
Apr 07 #Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 #Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 #Javascript
JavaScript 高级篇之函数 (四)
Apr 07 #Javascript
You might like
解析yii数据库的增删查改
2013/06/20 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
Python性能提升之延迟初始化
2016/12/04 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
GWT的应用有哪两种部署模式
2012/12/21 面试题
团支书的期末学习总结自我评价
2013/11/01 职场文书
施工安全协议书
2013/12/11 职场文书
成语的广告词
2014/03/19 职场文书
初中生操行评语大全
2014/04/24 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle