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)回來，這樣當(dāng)前選中的tab必丟。印度同事不肯用AJAX，無奈今天加班給印度人寫個(gè)demo，通過回傳URL參數(shù)來選擇tab
為了做這件事，除了jquery庫(kù)和idTabs插件，我們還需要下載一個(gè)用來搞URL的插件：jquery.url.js，傳送門：https://github.com/allmarkedup/jQuery-URL-Parser
（上述鏈接可能有錯(cuò)，如不能使用，可以到這里下載）
腳本之家提供idtabs打包下載 http://m.fzitv.net/jiaoben/43086.html
Tab菜單的HTML代碼這樣寫，每個(gè)tab的div自己搞定，不發(fā)出來浪費(fèi)頁(yè)面了：
<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>
（上述鏈接可能有錯(cuò)，如不能使用，可以到這里下載）
腳本之家提供idtabs打包下載 http://m.fzitv.net/jiaoben/43086.html
Tab菜單的HTML代碼這樣寫，每個(gè)tab的div自己搞定，不發(fā)出來浪費(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)上的無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的手風(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無限級(jí)分類jq拓展之前的無限級(jí)分類的封裝版的知識(shí)，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-08-08
jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼
下面小編就為大家分享一篇jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開發(fā)中有時(shí)需要在頁(yè)面上設(shè)置一個(gè)控制面板，默認(rèn)是不顯示的，當(dāng)用戶有需要時(shí)可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁(yè)面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。2015-03-03
點(diǎn)擊表單提交時(shí)出現(xiàn)jQuery沒有權(quán)限的解決方法
擊表單提交的時(shí)候會(huì)出現(xiàn) jQuery 沒有權(quán)限，試了一下jquery自帶的json方式提交成功2014-07-07
Easy UI動(dòng)態(tài)樹點(diǎn)擊文字實(shí)現(xiàn)展開關(guān)閉功能
這篇文章主要介紹了Easy UI動(dòng)態(tài)樹點(diǎn)擊文字實(shí)現(xiàn)展開關(guān)閉功能,需要的朋友可以參考下2017-09-09