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中Date.UTC()方法的使用
Jun 12 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
浅谈javascript的闭包
Jan 23 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 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 strcmp使用说明
2010/04/22 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
使用python画个小猪佩奇的示例代码
2018/06/06 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Django多个app urls配置代码实例
2020/11/26 Python
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
一夜的工作教学反思
2014/02/08 职场文书
培训专员岗位职责
2014/02/26 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL