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