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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
Angular单元测试之事件触发的实现
Jan 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
php 批量替换程序的具体实现代码
2013/10/04 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
php 数据结构之链表队列
2017/10/17 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python友情链接检查方法
2015/07/08 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python3中exp()函数用法分析
2019/02/19 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
EJB的激活机制
2013/10/25 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
自主招生自荐书
2013/11/29 职场文书
工作表现评语
2014/01/19 职场文书
超越自我演讲稿
2014/05/21 职场文书
英文邀请函
2015/02/02 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang