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获得页面base标签中url的方法
Apr 03 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
Vue.js表单控件实践
Oct 27 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
怎样在vue项目下添加ESLint的方法
May 16 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
解决Layui中layer报错的问题
Sep 03 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注册登录系统简化版
2020/12/28 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP实现简易blog的制作
2016/10/24 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
详解js创建对象的几种方法及继承
2019/04/12 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
日期和时间问题
2015/01/04 面试题
为什么要使用servlet
2016/01/17 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
自荐信如何“自荐”
2013/10/24 职场文书
大学生党员自我批评
2014/02/14 职场文书
拉拉队口号
2014/06/16 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang