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中null与undefined分析
Jul 25 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
实例分析js事件循环机制
Dec 13 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
vue引入静态js文件的方法
Jun 20 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
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
js实现双色球效果
2020/08/02 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
django如何连接已存在数据的数据库
2018/08/14 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Python函数基本使用原理详解
2020/03/19 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
酒店管理毕业生自荐信
2013/10/24 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
工作自荐信
2013/12/11 职场文书
2014年转正工作总结
2014/11/08 职场文书
教师自荐信范文
2015/03/06 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书