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车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
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
Drupal简体中文语言包安装教程
2014/09/27 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php简单实现数组分页的方法
2016/04/30 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
js数组操作学习总结
2013/11/04 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
Python的print用法示例
2014/02/11 Python
Python中除法使用的注意事项
2014/08/21 Python
Python标准库sched模块使用指南
2017/07/06 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
初任培训自我鉴定
2013/10/07 职场文书
考博专家推荐信模板
2013/12/02 职场文书
总经理司机职责
2014/02/02 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
学习作风建设心得体会
2014/10/22 职场文书
多人股份制合作协议书
2016/03/19 职场文书