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 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
Javascript模块化机制实现原理详解
Apr 02 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中的内存管理问题
2011/08/31 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
Three.js基础部分学习
2017/01/08 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
js断点调试经验分享
2017/12/08 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
使用Python构建Hopfield网络的教程
2015/04/14 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python命令行参数用法实例分析
2019/06/25 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
安全资金保障制度
2014/01/23 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
导游词之峨眉山
2019/12/16 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL