原生js实现tab切换
<!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=\‘#\‘" /a><a href=\‘#\‘" /a><a href=\‘#\‘" /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>
本文出自 “前端开发” 博客,请务必保留此出处http://maobin.blog.51cto.com/6335599/1359084
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。