本文实例讲述了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 class='container' > <div id="tab_content"> <div id="a" class="content">aaaaa </div> <div id="b" class="content">bbbbb </div> <div id="c" class="content">cccccc </div> <div id="d" class="content">DDDDDDDDDDDDDDd </div></div> <div ><ul id='tabnav'><li ><a href="#a" >A</a></li><li class='active'><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程序设计有所帮助。
新闻热点
疑难解答
