本文實(shí)例講述了js簡(jiǎn)單實(shí)現(xiàn)豎向tab選項(xiàng)卡的方法。分享給大家供大家參考。具體如下：
選項(xiàng)卡占據(jù)左邊，而內(nèi)容放在右邊，一個(gè)適合新手的豎向的tab選項(xiàng)卡特效例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ru"><head><title>簡(jiǎn)單js實(shí)現(xiàn)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>希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
