當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript实现tab切换的方法（2）

發(fā)布時間：2024/1/17 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript实现tab切换的方法（2）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

方法三：顯示和隱藏通過是有擁有class控制，先把所有的內容隱藏dispaly設為none，而該class的display設置為block，遍歷所有標題節(jié)點和內容節(jié)點，點擊標題后，該標題節(jié)點和對用的內容節(jié)點擁有class，其他的沒有。

<html>

<head>

<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="tab">

?<ul>

??<li class="fli">標題一</li>

??<li>標題二</li>

??<li>標題三</li>

??<li>標題四</li>

?</ul>

?</div>

?<div id="tabCon">

?<div class="fdiv">內容一</div>

?<div>內容二</div>

?<div>內容三</div>

?<div>內容四</div>

</div>

</body>

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>

該方法的缺點是，內容塊的div下面不能再有div標簽了。

方法四：不用js，用“input:checked”來做tab切換，先把所有的內容隱藏，被選中的內容顯示。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input:checked實現tab切換</title> <style> input{ opacity: 0;/*隱藏input的選擇框*/ } label{ cursor: pointer;/*鼠標移上去變成手狀*/ 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;/*使內容區(qū)域位置一樣*/ } </style> </head> <body> <div class="tabs"> ?<input checked id="one" name="tabs" type="radio"> ?<label for="one">標題一</label> ?<input id="two" name="tabs" type="radio"> ?<label for="two">標題二</label> ?<div class="panels"> ??<div class="panel"> ??<p>內容一</p> ??</div> ??<div class="panel"> ??<p>內容二</p> ??</div> ?</div> </div> </body> </html>

該方法的缺點是，不同區(qū)域切換只能通過點擊。

轉載于:https://www.cnblogs.com/Marlboro-pm/p/6559048.html

總結

以上是生活随笔為你收集整理的javascript实现tab切换的方法（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：解决oj哈夫曼树问题，学习了priori
下一篇： JS基础——循环很重要