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调用wcf并展示出数据的方法
Jul 07 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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 高手之路(一)
2006/10/09 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
浅析Ajax语法
2016/12/05 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
flask session组件的使用示例
2018/12/25 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
体育专业个人求职信范文
2013/12/27 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
《自选商场》教学反思
2014/02/14 职场文书
五好关工委申报材料
2014/05/31 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
python小程序之飘落的银杏
2021/04/17 Python