利用idTabs与jQuery URL插件实现URL参数控制Tab切换

idTabs根据URL参数选择Tab插件配置教程

要实现此功能，除了引入jquery库和idTabs插件外，还需下载一个用于处理URL的插件：jquery.url.js，下载地址：https://github.com/allmarkedup/jQuery-URL-Parser

（上述链接可能存在错误，若无法使用，可尝试从其他渠道下载）

本站提供idtabs打包下载 https://www.jb51.net/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>

效果如图所示：