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语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
微信小程序实现日历签到
Sep 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中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python装饰器的特性原理详解
2019/12/25 Python
合同专员岗位职责
2013/12/18 职场文书
销售主管竞聘书
2014/03/31 职场文书
企业法人授权委托书
2014/04/03 职场文书
劳资协议书范本
2014/04/23 职场文书
淘宝店策划方案
2014/06/07 职场文书
商场周年庆活动方案
2014/08/19 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2014年部门工作总结
2014/11/12 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
预备党员入党感言
2015/08/01 职场文书
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python