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 相关文章推荐
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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 动态多文件上传
2009/01/18 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
javascript中的new使用
2010/03/20 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
用python做游戏的细节详解
2019/06/25 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
c语言常见笔试题总结
2016/09/05 面试题
捐献物资倡议书范文
2014/05/19 职场文书
党员群众路线承诺书
2014/05/20 职场文书
小学社团活动总结
2014/06/27 职场文书
会计岗位说明书
2014/07/29 职场文书
领导视察通讯稿
2015/07/18 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android