jquery實現tab切換：
html代碼：
<ul class="tabs" id="tabs01"> <li><a href="javascr class="current">tab切換一</a></li> <li><a href="Javascript:void(0)" >tab切換二</a></li> <li><a href="javascript:void(0)">tab切換三</a></li> </ul><div class="container" id="container01"> <div class="con">顯示內容一</div> <div class="con">顯示內容二</div> <div class="con">顯示內容三</div></div>
下面的代碼就是具體實現tabs的函數：
var tabs = function(tab, con){ tab.click(function(){ var indx = tab.index(this); tab.removeClass('current'); $(this).addClass('current'); con.hide(); con.eq(indx).show(); }) }
jquery調用函數代碼如下：
$(function(){ tabs($("#tabs01 a"), $('#container01 .con')); })
當然用這種調用方法實現還是比較方便的。
首先CSS公有代碼：
<style type="text/css">.wrapper {width:600px; height:auto; margin:0 auto;}p {margin:0; padding:0; color:#333333; font-family:宋體; font-size:12px;}ul {margin:0; padding:0; list-style-type:none; width:500px; height:16px; border-bottom:#DDDDDD solid 1px;}li {margin:0; padding:0; height:16px; padding-left:5px; padding-right:10px; float:left; border-left:#FFFFFF solid 1px; border-right:#808080 solid 1px; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#000000; background-color:#F4F4F4; cursor:pointer;}.one {width:500px; padding-top:20px; display:none; }.blue {color:#58A200; background-color:#8C5C5C;}.white {color:#000000; background-color:#F4F4F4;}</style>
html代碼
<div class="wrapper"> <ul> <li id="id0" onclick="showTab(0)" class="blue">Javascript</li> <li id="id1" onclick="showTab(1)">Action Script</li> <li id="id2" onclick="showTab(2)">photoshop</li> </ul> <div class="one" id="tab0" style="display:block"> <p> </p> </div> <div class="one" id="tab1"> <p></p> </div> <div class="one" id="tab2"> <p></p> </div> </div>
js代碼：
<script type="text/javascript">function showTab(num){for (i=0; i<3; i++){document.getElementById("tab"+i).style.display="none";document.getElementById("id"+i).className="white";}document.getElementById("tab"+num).style.display="block";document.getElementById("id"+num).className="blue";}</script>
在這里先把tab0, tab1, tab2都設置成display:none, class屬性為white, 然后再根據所傳參數來設置成display:block, class為blue
方法二的HTML代碼：
<div class="wrapper"><ul> <li id="id0" onclick="showTab(0,0)" class="blue">Javascript</li> <li id="id1" onclick="showTab(1,1)">Action Script</li> <li id="id2" onclick="showTab(2,2)">Photoshop</li></ul><div class="one" id="tab0" style="display:block"><p></p></div><div class="two" id="tab1" style="display:none"><p></p></div><div class="three" id="tab2" style="display:none"><p></p></div></div>
js代碼：
<script type="text/javascript">function showTab(i,j){var x;var y;var l,m;for (l=0; l<3; l++){ x=document.getElementById("id"+l); if (i==l) { x.className="blue"; } else { x.className="white"; }}for (m=0; m<3; m++){ y=document.getElementById("tab" + m); if (j==m) { y.style.display="block"; } else { y.style.display="none"; }}}</script>
注意這種方法不能去掉l,m, 直接寫成for (i=0; i<3; i++), for (j=0; j<3; j++)
因為i原本是函數的參數，它的值是外面傳進來的，如果將for (l=0; l<3; l++)換成for (i=0; i<3; i++)的話，i就被重新賦值了，showTab(0,0)、showTab(1,1)、showTab(1,2)括號里無論傳任何值都沒有區別了。
html代碼如下：
<div class="wrap"> <ul id="tag"> <li class="current" >標簽一</li> <li>標簽二</li> <li>標簽三</li> </ul> <div id="tagContent"> <div> 內容一<br>內容一 </div> <div> 內容二<br>內容二 </div> <div> 內容三<br>內容三 </div> </div></div>
css代碼：
*{margin:0;padding:0;} .wrap{width:500px; margin:10px auto; } #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; } #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;} #tag .current{ color:#000; background:#ccc; } #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }js代碼：
function tabs(title,content){ var tag=document.getElementById(title).children; //獲取Tag下的li，即Tag標簽 var content=document.getElementById(content).children; //獲取Tag標簽對應的內容 content[0].style.display = "block"; //默認顯示第一個標簽的內容 var len= tag.length; for(var i=0; i<len; i++) //無論點擊誰都能實現當前顯示，其余隱藏 { tag[i].number=i; tag[i].onclick = function() //0級DOM的事件句柄注冊 { for(var n=0; n<len; n++) { tag[n].className=""; content[n].style.display="none"; } //首先將全部的div隱藏 tag[this.number].className = "current"; content[this.number].style.display = "block"; } } }; tabs("tag","tagContent");//你想實現tab切換的某一個實例。//上面用到了chidren，可以用childNodes來實現該方法，但是要去除里面空白節點。代碼如下：function tabs(title,content){ var tag=document.getElementById(title).childNodes; console.log(tag.length);// 打印結果為7 for(var i=0;i<tag.length;i++){ if(tag[i].nodeType==3&&//s/.test(tag[i].nodeValue)){ tag[i].parentNode.removeChild(tag[i]); } } console.log(tag.length);// 打印結果為3 var content=document.getElementById(content).childNodes; console.log(content.length);// 打印結果為7 for(var i=0;i<content.length;i++){ if(content[i].nodeType==3&&//s/.test(content[i].nodeValue)){ content[i].parentNode.removeChild(content[i]); } } console.log(content.length);// 打印結果為3 content[0].style.display = "block"; //默認顯示第一個標簽的內容 var len= tag.length; for(var i=0; i<len; i++) //無論點擊誰都能實現當前顯示，其余隱藏 { tag[i].number=i; tag[i].onclick = function() //0級DOM的事件句柄注冊 { for(var n=0; n<len; n++) { tag[n].className=""; content[n].style.display="none"; } //首先將全部的div隱藏 //console.log(this.number); tag[this.number].className = "current"; content[this.number].style.display = "block"; } } }; tabs("tag","tagContent");
新聞熱點
疑難解答
