idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件
更新時間：2012年04月11日 17:48:36 作者：
我們的項(xiàng)目用了SunSean的idTabs，但每個tab里的控件會觸發(fā)postback，或者轉(zhuǎn)到其他頁面再轉(zhuǎn)回來，這樣當(dāng)前選中的tab必丟。印度同事不肯用AJAX，無奈今天加班給印度人寫個demo，通過回傳URL參數(shù)來選擇tab
為了做這件事，除了jquery庫和idTabs插件，我們還需要下載一個用來搞URL的插件：jquery.url.js，傳送門：https://github.com/allmarkedup/jQuery-URL-Parser
（上述鏈接可能有錯，如不能使用，可以到這里下載）
腳本之家提供idtabs打包下載 http://www.dbjr.com.cn/jiaoben/43086.html
Tab菜單的HTML代碼這樣寫，每個tab的div自己搞定，不發(fā)出來浪費(fèi)頁面了：
<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官網(wǎng)上的無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打包下載 http://www.dbjr.com.cn/jiaoben/43086.html
Tab菜單的HTML代碼這樣寫，每個tab的div自己搞定，不發(fā)出來浪費(fèi)頁面了：
復(fù)制代碼 代碼如下:
<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官網(wǎng)上的無javascript的寫法。
腳本部分這樣寫：
復(fù)制代碼 代碼如下:
<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>
有圖有真相：
相關(guān)文章
使用jQuery Ajax 請求webservice來實(shí)現(xiàn)更簡練的Ajax
以往我們在做ajax時,都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個請求都要建一個這樣的文件，非常麻煩，下面我們甩掉ashx和asmx來使用jQuery Ajax 請求webservice來實(shí)現(xiàn)更簡練的Ajax，需要的朋友參考下2016-08-08
jquery的checkbox,radio,select等方法小結(jié)
jquery的checkbox，radio，和select是jquery操作的一個難點(diǎn)和重點(diǎn)，很多前端新手對其了解不是很透徹。時間久了不用，我在寫的時候有時也難免對某些操作支支吾吾，記不清楚，現(xiàn)在，對其做一些簡單的總結(jié)2016-08-08
本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實(shí)用的15款jQuery插件，都有著非常炫酷的效果，十分的實(shí)用，這里推薦給大家。2015-07-07
jquery實(shí)現(xiàn)具有嵌套功能的選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)具有嵌套功能的選項(xiàng)卡的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
如果你的網(wǎng)站風(fēng)格適合，可以用這種方式來給頁面布局，支持任意尺寸的圖片滑動、上下左右滑動,需要的朋友可以參考下2014-08-08
jquery實(shí)現(xiàn)可橫向和豎向展開的動態(tài)下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)可橫向和豎向展開的動態(tài)下滑菜單效果,以實(shí)例形式較為詳細(xì)的分析了jquery實(shí)現(xiàn)橫向與豎向展開菜單的相關(guān)技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-08-08
jquery 查找iframe父級頁面元素的實(shí)現(xiàn)代碼
jquery 查找iframe父級頁面元素的實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2011-08-08
JQuery中節(jié)點(diǎn)遍歷方法實(shí)例
這篇文章主要介紹了JQuery中節(jié)點(diǎn)遍歷方法,實(shí)例分析了jQuery遍歷節(jié)點(diǎn)的技巧,需要的朋友可以參考下2015-05-05
jquery 漂亮的刪除確認(rèn)和提交無刷新刪除,本例數(shù)據(jù)庫結(jié)構(gòu)很簡單，就一個字段就行了，具體的實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下2013-11-11
jQuery實(shí)現(xiàn)定時讀取分析xml文件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時讀取分析xml文件的方法,涉及jquery通過定時器采用Ajax方法讀取并處理XML文件的相關(guān)技巧,需要的朋友可以參考下2015-07-07