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 使用手册(六)
Sep 23 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
JS实现横向轮播图(初级版)
Jun 24 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 header函数分析详解
2011/08/06 PHP
php实现httpclient类示例
2014/04/08 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
设定php简写功能的方法
2019/11/28 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
Js四则运算函数代码
2012/07/21 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
Python六大开源框架对比
2015/10/19 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
工业自动化毕业生自荐信范文
2014/01/04 职场文书
粗加工管理制度
2014/02/04 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
mysql全面解析json/数组
2022/07/07 MySQL