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 函数调用的对象和方法
Jul 01 Javascript
关于js类的定义
Jun 28 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
如何测量vue应用运行时的性能
Jun 21 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
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python sorted方法和列表使用解析
2019/11/18 Python
WxPython实现无边框界面
2019/11/18 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
自我鉴定模板
2013/10/29 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
科学发展观活动总结
2014/08/28 职场文书
委托培训协议书
2014/11/17 职场文书
员工辞职信范文
2015/03/02 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang