idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件

更新時(shí)間：2012年04月11日 17:48:36 作者：

我們的項(xiàng)目用了SunSean的idTabs，但每個(gè)tab里的控件會(huì)觸發(fā)postback，或者轉(zhuǎn)到其他頁(yè)面再轉(zhuǎn)回來(lái)，這樣當(dāng)前選中的tab必丟。印度同事不肯用AJAX，無(wú)奈今天加班給印度人寫(xiě)個(gè)demo，通過(guò)回傳URL參數(shù)來(lái)選擇tab

為了做這件事，除了jquery庫(kù)和idTabs插件，我們還需要下載一個(gè)用來(lái)搞URL的插件：jquery.url.js，傳送門(mén)：https://github.com/allmarkedup/jQuery-URL-Parser
（上述鏈接可能有錯(cuò)，如不能使用，可以到這里下載）
腳本之家提供idtabs打包下載 http://www.dhdzp.com/jiaoben/43086.html
Tab菜單的HTML代碼這樣寫(xiě)，每個(gè)tab的div自己搞定，不發(fā)出來(lái)浪費(fèi)頁(yè)面了：

復(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)上的無(wú)javascript的寫(xiě)法。
腳本部分這樣寫(xiě)：

復(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的手風(fēng)琴圖片展示效果實(shí)現(xiàn)方法
這篇文章主要介紹了基于jquery的手風(fēng)琴圖片展示效果實(shí)現(xiàn)方法,涉及jQuery基于事件實(shí)現(xiàn)改變css樣式的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-12-12
可以浮動(dòng)某個(gè)物體的jquery控件用法實(shí)例
這篇文章主要介紹了可以浮動(dòng)某個(gè)物體的jquery控件,實(shí)例分析了jquery控件實(shí)現(xiàn)頁(yè)面浮動(dòng)層的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
修改或擴(kuò)展jQuery原生方法的代碼實(shí)例
這篇文章主要介紹了修改或擴(kuò)展jQuery原生方法的代碼實(shí)例,本文用一個(gè)擴(kuò)展jquery原生方法val的例子,講解了如何對(duì)jquery原生方法修改或擴(kuò)展,需要的朋友可以參考下
2015-01-01
jQuery.autocomplete 支持中文輸入(firefox)修正方法
jQuery.autocomplete 是jquery的流行插件，，能夠很好的實(shí)現(xiàn)輸入框的自動(dòng)完成(autocomplete)、建議提示(input suggest)功能，支持ajax數(shù)據(jù)加載。
2011-03-03
jQuery使用jsonp實(shí)現(xiàn)百度搜索的示例代碼
這篇文章主要介紹了jQuery使用jsonp實(shí)現(xiàn)百度搜索，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
BootStrap無(wú)限級(jí)分類(無(wú)限極分類封裝版)
本文給大家介紹bootstrap無(wú)限級(jí)分類jq拓展之前的無(wú)限級(jí)分類的封裝版的知識(shí)，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
2016-08-08
jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼
下面小編就為大家分享一篇jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開(kāi)發(fā)中有時(shí)需要在頁(yè)面上設(shè)置一個(gè)控制面板，默認(rèn)是不顯示的，當(dāng)用戶有需要時(shí)可以通過(guò)按鈕觸發(fā)調(diào)用面板展示。常見(jiàn)的有頁(yè)面?zhèn)冗吇雒姘逍Ч１疚膶⑹褂胘Query插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。
2015-03-03
點(diǎn)擊表單提交時(shí)出現(xiàn)jQuery沒(méi)有權(quán)限的解決方法
擊表單提交的時(shí)候會(huì)出現(xiàn) jQuery 沒(méi)有權(quán)限，試了一下jquery自帶的json方式提交成功
2014-07-07
Easy UI動(dòng)態(tài)樹(shù)點(diǎn)擊文字實(shí)現(xiàn)展開(kāi)關(guān)閉功能
這篇文章主要介紹了Easy UI動(dòng)態(tài)樹(shù)點(diǎn)擊文字實(shí)現(xiàn)展開(kāi)關(guān)閉功能,需要的朋友可以參考下
2017-09-09