當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
javascript实现tab切换的方法（2）
生活随笔
收集整理的這篇文章主要介紹了
javascript实现tab切换的方法（2）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
方法三：顯示和隱藏通過(guò)是有擁有class控制，先把所有的內(nèi)容隱藏dispaly設(shè)為none，而該class的display設(shè)置為block，遍歷所有標(biāo)題節(jié)點(diǎn)和內(nèi)容節(jié)點(diǎn)，點(diǎn)擊標(biāo)題后，該標(biāo)題節(jié)點(diǎn)和對(duì)用的內(nèi)容節(jié)點(diǎn)擁有class，其他的沒(méi)有。
?
<html>?
<head>?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />?
<style>?
*{?
?padding: 0;?
?margin: 0;?
}?
li{?
?list-style: none;?
?float:left;?
}?
#tabCon {?
?clear: both;?
}?
#tabCon div {?
?display:none;?
}?
#tabCon div.fdiv {?
?display:block;?
}?
</style>?
</head>?
<body>?
<div id="tanContainer">?
?<div id="tab">?
?<ul>?
??<li class="fli">標(biāo)題一</li>?
??<li>標(biāo)題二</li>?
??<li>標(biāo)題三</li>?
??<li>標(biāo)題四</li>?
?</ul>?
?</div>?
?<div id="tabCon">?
?<div class="fdiv">內(nèi)容一</div>?
?<div>內(nèi)容二</div>?
?<div>內(nèi)容三</div>?
?<div>內(nèi)容四</div>?
</div>?
</div>?
</body>?
<script>?
var tabs=document.getElementById("tab").getElementsByTagName("li");?
var divs=document.getElementById("tabCon").getElementsByTagName("div");?
?
for(var i=0;i<tabs.length;i++){?
?tabs[i].onclick=function(){change(this);}?
}?
?
function change(obj){?
for(var i=0;i<tabs.length;i++){?
?if(tabs[i]==obj){?
?tabs[i].className="fli";?
?divs[i].className="fdiv";?
}else{?
?tabs[i].className="";?
?divs[i].className="";?
?}?
?}?
}?
</script>?
</html>該方法的缺點(diǎn)是，內(nèi)容塊的div下面不能再有div標(biāo)簽了。
方法四：不用js，用“input:checked”來(lái)做tab切換，先把所有的內(nèi)容隱藏，被選中的內(nèi)容顯示。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input:checked實(shí)現(xiàn)tab切換</title> <style> input{ opacity: 0;/*隱藏input的選擇框*/ } label{ cursor: pointer;/*鼠標(biāo)移上去變成手狀*/ float: left; } label:hover{ background: #eee; } input:checked+label{ color: red; } /*選擇前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/ .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1), .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){ opacity: 1; } .panel{ opacity: 0; position: absolute;/*使內(nèi)容區(qū)域位置一樣*/ } </style> </head> <body> <div class="tabs"> ?<input checked id="one" name="tabs" type="radio"> ?<label for="one">標(biāo)題一</label> ?<input id="two" name="tabs" type="radio"> ?<label for="two">標(biāo)題二</label> ?<div class="panels"> ??<div class="panel"> ??<p>內(nèi)容一</p> ??</div> ??<div class="panel"> ??<p>內(nèi)容二</p> ??</div> ?</div> </div> </body> </html>該方法的缺點(diǎn)是，不同區(qū)域切換只能通過(guò)點(diǎn)擊。
?
轉(zhuǎn)載于:https://www.cnblogs.com/Marlboro-pm/p/6559048.html
總結(jié)
以上是生活随笔為你收集整理的javascript实现tab切换的方法（2）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 解决oj哈夫曼树问题，学习了priori
- 下一篇： JS基础——循环很重要