<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> *{margin:0;padding:0} a{ display:inline-block;*display:inline;zoom:1;padding:5px 15px; background:#ccc; margin-right:10px} .hide{ display:none} .show{ display:block} </style> </head> <body> <a href="javascript:;">1</a><a href="javascript:;">2</a><a href="javascript:;">3</a> <div>內容1</div><div>內容2</div><div>內容3</div> <script type="text/javascript"> var btn=document.getElementsByTagName("a"),box=document.getElementsByTagName("div"); for(var i=0;i<btn.length;i++){ function tab(n){ btn[n]. for(var j=0;j<box.length;j++){ box[j].className="hide"; } box[n].className="show"; } } tab(i) } </script> <script type="text/javascript"> var btn=document.getElementsByTagName("a"),box=document.getElementsByTagName("div"); for(var i=0;i<btn.length;i++){ (function(_i){ btn[_i]. //利用js閉包實現tab切換 for(var j=0;j<box.length;j++){ box[j].className="hide"; } box[_i].className="show"; } })(i); } </script> </body> </html>
原生js實現tab切換
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.