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二维数组采用定义数组的数组来实现
Dec 09 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
vue组件的写法汇总
Apr 12 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
Vue实现数据请求拦截
Oct 23 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删除数组中重复元素的方法
2015/12/22 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python显示进度条的方法
2014/09/20 Python
17个Python小技巧分享
2015/01/23 Python
python Django模板的使用方法
2016/01/14 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python pandas库的安装和创建
2019/01/10 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
英国电子专家:maplin
2019/09/04 全球购物
我的动漫时代的创业计划书范文
2014/01/27 职场文书
项目施工员岗位职责
2014/03/09 职场文书
出国留学担保书
2014/05/20 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
求职推荐信范文
2015/03/27 职场文书
python缺失值的解决方法总结
2021/06/09 Python
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏