全面解析標(biāo)簽頁的切換方式
標(biāo)簽頁的切換方式如下所示:
1、控制tab的顯示與隱藏
2、tab不切換,數(shù)據(jù)加載
控制tab的顯示與隱藏
前端腳本:
1、jquery實現(xiàn):
$(function(){ $(".sdkj-tabs li").click(function() { $(this).addClass("on").siblings().removeClass("on"); var index=$(".sdkj-tabs li").index(this); $(".cont-tabs>div").eq(index).show().siblings().hide(); }); });
引入jquery文件,代碼簡潔
jquery文件較大,瀏覽器不兼容
2、js 實現(xiàn)
function selectTab(showContent,selfObj){ var tab = document.getElementById("sdkj-tabs").getElementsByTagName("li"); var tablength = tab.length; for(i=0; i<tablength; i++){ tab[i].className = ""; } selfObj.className = "on"; // 標(biāo)簽頁切換 for(i=0; j=document.getElementById("cont-tab"+i); i++){ j.style.display = "none"; } document.getElementById(showContent).style.display = "block"; }
無需引入jquery文件
代碼量大,需每個標(biāo)簽添加函數(shù)及ID
3、插件實現(xiàn)
var tabs=function(){ function tag(name,elem){ return (elem||document).getElementsByTagName(name); } //獲得相應(yīng)ID的元素 function id(name){ return document.getElementById(name); } function first(elem){ elem=elem.firstChild; return elem&&elem.nodeType==1? elem:next(elem); } function next(elem){ elem=elem.nextSibling; while(elem){ if(elem.nodeType==1){ return elem; } else{ elem=elem.nextSibling; } } } function child(elem){ var arrays = new Array(); var array_int=0; var elem_child=first(elem); for(array_int=0;elem_child;array_int++){ //console.log("elem:"+elem); arrays[array_int]=elem_child; elem_child=next(elem_child); } return arrays; } return { set:function(elemId,tabId){ var elem=tag("li",id(elemId)); var tabs=child(id(tabId)); var listNum=elem.length; var tabNum=tabs.length; console.log(tabs); for(var i=0;i<listNum;i++){ elem[i].onclick=(function(i){ return function(){ for(var j=0;j<3;j++){ if(i==j){ tabs[j].style.display="block"; elem[j].className="on"; } else{ tabs[j].style.display="none"; elem[j].className=" "; } } } })(i) } } } }(); tabs.set("sdkj-tabs","cont-tabs");//執(zhí)行
無需引入jquery文件,只需添加父元素ID
以上所述是小編給大家介紹的全面解析標(biāo)簽頁的切換方式的全部敘述,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
用JQuery 判斷某個屬性是否存在hasAttr的解決方法
本篇文章介紹了,用JQuery 判斷某個屬性是否存在hasAttr的解決方法。需要的朋友參考下2013-04-04淺談ajax在jquery中的請求和servlet中的響應(yīng)
下面小編就為大家分享一篇淺談ajax在jquery中的請求和servlet中的響應(yīng),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01jquery實現(xiàn)跳到底部,回到頂部效果的簡單實例(類似錨)
下面小編就為大家?guī)硪黄猨query實現(xiàn)跳到底部,回到頂部效果的簡單實例(類似錨)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07詳解jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用
這篇文章主要介紹了jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁面布局方式為主,需要的朋友可以參考下2015-12-12