首頁 > 開發者 > JavaScript
js簡單實現豎向tab選項卡的方法，js豎向tab選項卡
本文執行個體講述了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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
