首頁 > web前端 > js教程 > 基於jquery的9行js輕鬆實作tab控制項範例_jquery

基於jquery的9行js輕鬆實作tab控制項範例_jquery

WBOY
發布: 2016-05-16 17:20:05
原創
953 人瀏覽過
複製代碼代碼如下:







/**
* 考慮到tab和pane有可能被動態的添加和刪除,
* 所以每次都廢點時間去查找先前被激活的tab
*/
var tab = function(tabId,activeId){
$("#" tabId).delegate ("li:not(#" activeId ")","點選",function(){
$("#" $("#" activeId).attr("tar")).css("display" ,"none");
$("#" activeId).removeAttr("id");

$(this).attr("id",activeId);
$(" #" $(this).attr("tar")) .css("顯示","塊");
};
腳本>
頭>

li{
邊框:1px 實心#b5e2f3;
邊框底部:0px;
浮動:左;
寬度:100px;
高度:25pxx; :0 7px;
背景:#F1FEF3;
填充:9px 0 0 0;
文字對齊:居中;
顏色:#33a3dc;
遊標:指針;
顏色:#33a3dc;
遊標:指針;
}
ul{
寬度:800;
高度:36px;
邊框底部:1px實心#b5e2f3;
}
#selected{
背景: #FFF! 🎜>邊框底部:2px實心#FFF! both;
高度:300px;
背景:#FFFFFF;
寬度:800px;
高度:100pxx;
內邊距:25px;
邊框:1px 實心#b5e2f3;
}
風格>


    ;
  • 1

  • 2

  • 3

  • 4



;

1




div>
身體>

tab("選項卡","所選");
腳本>


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板