本文实例讲述了js简单实现竖向tab选项卡的方法。分享给大家供大家参考。具体如下：
选项卡占据左边，而内容放在右边，一个适合新手的竖向的tab选项卡特效例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title>简单js实现tab切换</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> *{ margin:0;padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container{ margin:0 auto; width:500px; overflow:hidden; background:beige; } li{ border-top:1px solid lightgrey; border-left:1px solid lightgrey; border-right:1px solid lightgrey; height:35px; line-height:35px; list-style:none; text-align:center; width:100px; } li:last-child{ height:159px;border-right:1px solid lightgrey; border-bottom:1px solid lightgrey; } li.active { border-right:1px solid white;background:white; } li.normal { border-right:1px solid white;background:red; } #tab_content{ float:right; width:400px; *width:394px; background:white; height:300px; overflow:hidden; border-top:1px solid lightgrey; border-right:1px solid lightgrey; border-bottom:1px solid lightgrey; border-left:0px solid lightgrey; } #tab_content .content{ padding: 15px; -moz-border-radius: 5px; height:300px; } </style> </head> <body> <div > <div> <div> aaaaa </div> <div> bbbbb </div> <div> cccccc </div> <div> DDDDDDDDDDDDDDd </div> </div> <div > <ul><li ><a href="#a" >A</a></li> <li><a href="#b" >B</a></li> <li><a href="#c" >C</a></li> <li><a href="#d" >D</a></li> <li ><a href="#d" ></a></li> </ul> </div> </div> <script type="text/javascript"> function changeStyle(){ this.onclick=function(){ var list=this.parentNode.childNodes; for(var i=0;i<list.length;i++){ if(1==list[i].nodeType && 'active'==list[i].className){ list[i].className=""; } } this.className='active'; } } var tabs=document.getElementById('tabnav').childNodes; for(var i=0;i<tabs.length;i++){ if(1==tabs[i].nodeType){ changeStyle.call(tabs[i]); } } </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章: