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 相关文章推荐
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
webpack external模块的具体使用
Mar 10 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
用vue 实现手机触屏滑动功能
May 28 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/11/07 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
大二学生学习个人自我评价
2014/01/19 职场文书
打造完美自荐信
2014/01/24 职场文书
春节联欢会主持词
2014/03/24 职场文书
卖车协议书
2014/04/21 职场文书
小学六一主持词开场白
2015/05/28 职场文书
居住证明范文
2015/06/17 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js