全面解析標(biāo)簽頁(yè)的切換方式
標(biāo)簽頁(yè)的切換方式如下所示:
1、控制tab的顯示與隱藏
2、tab不切換,數(shù)據(jù)加載
控制tab的顯示與隱藏
前端腳本:
1、jquery實(shí)現(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文件,代碼簡(jiǎn)潔
jquery文件較大,瀏覽器不兼容
2、js 實(shí)現(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)簽頁(yè)切換 for(i=0; j=document.getElementById("cont-tab"+i); i++){ j.style.display = "none"; } document.getElementById(showContent).style.display = "block"; }
無(wú)需引入jquery文件
代碼量大,需每個(gè)標(biāo)簽添加函數(shù)及ID
3、插件實(shí)現(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í)行
無(wú)需引入jquery文件,只需添加父元素ID
以上所述是小編給大家介紹的全面解析標(biāo)簽頁(yè)的切換方式的全部敘述,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
用JQuery 判斷某個(gè)屬性是否存在hasAttr的解決方法
本篇文章介紹了,用JQuery 判斷某個(gè)屬性是否存在hasAttr的解決方法。需要的朋友參考下2013-04-04jquery實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要介紹了jquery實(shí)現(xiàn)手風(fēng)琴效果,像手風(fēng)琴一樣打開(kāi),立體感效果比較強(qiáng),感興趣的小伙伴們可以參考一下2015-11-11jQuery循環(huán)滾動(dòng)新聞列表示例代碼
jquery實(shí)現(xiàn)點(diǎn)擊公告的上一條下一條來(lái)查看滾動(dòng)條,示例代碼如下,希望對(duì)大家有所幫助2014-06-06淺談ajax在jquery中的請(qǐng)求和servlet中的響應(yīng)
下面小編就為大家分享一篇淺談ajax在jquery中的請(qǐng)求和servlet中的響應(yīng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01jquery實(shí)現(xiàn)跳到底部,回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)跳到底部,回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07詳解jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的ui-grid網(wǎng)格布局使用
這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁(yè)面布局方式為主,需要的朋友可以參考下2015-12-12