idTabs基于JQuery的根据URL参数选择Tab插件

发布时间：2020-12-14 22:51:51 所属栏目：资源来源：网络整理

导读：为了做这件事，除了jquery库和idTabs插件，我们还需要下载一个用来搞URL的插件：jquery.url.js，传送门：https://github.com/allmarkedup/jQuery-URL-Parser （上述链接可能有错，如不能使用，可以到这里下载）编程小技巧提供idtabs打包下载 http://www.jb51

为了做这件事，除了jquery库和idTabs插件，我们还需要下载一个用来搞URL的插件：jquery.url.js，传送门：https://github.com/allmarkedup/jQuery-URL-Parser
（上述链接可能有错，如不能使用，可以到这里下载）
编程小技巧提供idtabs打包下载 http://www.aspzz.cn/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 emptynAuto selecting idTab1"); 
tabToSelect = "idTab1"; 
} 
//alert("Selecting: " + tabToSelect); 
$(".tabmenu ul").idTabs(tabToSelect); 
}); 
</script> 

有图有真相：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!