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 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
React实现全选功能
Aug 25 Javascript
一起深入理解js中的事件对象
Feb 06 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添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
PHP的自定义模板引擎
2017/03/24 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
实例讲解PHP表单
2020/06/10 PHP
告诉大家什么是JSON
2008/06/10 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
微信小程序实现留言板
2018/10/31 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
运动会通讯稿50字
2015/07/20 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript