1. 以下是程序代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /> <meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。全力打造一流网页特效站!" /> <title>网页特效 简洁css竖型tab选项卡 站长特效网</title> <style type="text/css"> <!-- body{ padding:0;font:12px "宋体"; } /*选项卡1*/ #lib_wwwzzjsnet{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;} /*菜单class*/ .lib_zzjsnet{border:1px solid #95C9E1;} .lib_menubox_zzjsnet {line-height:28px;position:relative; float:left; width:130px; height:240px;border-right:1px solid #95C9E1;} .lib_menubox_zzjsnet ul{margin:0px;padding:0px;list-style:none; position:absolute; top:15px; left:5px; margin-left:10px; height:25px;text-align:center;} .lib_menubox_zzjsnet li{display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-bottom:5px;height:25px;line-height:25px; background-color:#E4F2FD} .lib_menubox_zzjsnet li.hover{padding:0px;background:#fff;width:116px;border:1px solid #95C9E1; border-right:0; color:#739242;height:25px;line-height:25px;} .lib_contentbox_zzjsnet{margin-top:0px; border-top:none;padding:20px; border-left:0; margin-left:130px;} --> </style> <script> <!-- function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var zzjs=document.getElementById("wwwzzjsnet_"+name+"_"+i); menu.className=i==cursel?"hover":""; zzjs.style.display=i==cursel?"block":"none"; } }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。 //--> </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效。<hr> <!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站--> <div id="lib_wwwzzjsnet" class="lib_zzjsnet"> <div class="lib_menubox_zzjsnet"> <ul> <li id="zzjs1" οnclick="setTab('zzjs',1,5)" class="hover">站长特效一号</li> <li id="zzjs2" οnclick="setTab('zzjs',2,5)">站长特效二号</li> <li id="zzjs3" οnclick="setTab('zzjs',3,5)">站长特效三号</li> <li id="zzjs4" οnclick="setTab('zzjs',4,5)">站长特效四号</li> <li id="zzjs5" οnclick="setTab('zzjs',5,5)">站长特效五号</li> </ul> </div> <div class="lib_contentbox_zzjsnet"> <div id="wwwzzjsnet_zzjs_1" ><a href="http://www.zzjs.net">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!<br />这里是一号选项卡内容</div> <div id="wwwzzjsnet_zzjs_2" style="display:none"><a href="http://www.zzjs.net">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!<br />这里是二号选项卡内容</div> <div id="wwwzzjsnet_zzjs_3" style="display:none"><a href="http://www.zzjs.net">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!<br />这里是三号选项卡内容</div> <div id="wwwzzjsnet_zzjs_4" style="display:none"><a href="http://www.zzjs.net">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!<br />这里是四号选项卡内容</div> <div id="wwwzzjsnet_zzjs_5" style="display:none"><a href="http://www.zzjs.net">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!<br />这里是五号选项卡内容</div> </div> </div> </body> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 2.再写一个css比较漂亮的 tab滑门菜单JS代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>竖向tab滑门菜单JS代码</title> <style> .tab_box{ width:995px; margin:20px auto;} .lyz_tab_left{ background:url(http://www.codefans.net/jscss/demoimg/201109/left3.jpg) no-repeat top right; float: left; width: 259px; height: auto !important; min-height:500px; height:500px;} .pro_con1111{ float: left; overflow: hidden; width: 249px; height: auto;} .pro_con111 UL{ padding: 0px; width: 259px; list-style-type: none;} .pro_con111 UL LI{ padding-right: 30px; display: inline; font-weight: bold; font-size: 14px; background: url(http://www.codefans.net/jscss/demoimg/201109/hongbj.jpg) no-repeat left center; float: left; margin-bottom: 5px; width: 219px; cursor: pointer; color: #fff; line-height: 34px; height: 34px; text-align: right;} .pro_con111 UL LI.hover{ padding-right: 30px; display: inline; font-weight: bold; font-size: 14px; background: url(http://www.codefans.net/jscss/demoimg/201109/baibj.jpg) no-repeat right 50%; float: left; margin-bottom: 5px; width: 229px; cursor: pointer; color: #3c3c3c; line-height: 34px; height: 34px; text-align: right;} .lyz_tab_right{ padding-right: 10px; display: inline; padding-left: 20px; background: url(http://www.codefans.net/jscss/demoimg/201109/right4.jpg) no-repeat left top; float: left; padding-bottom: 20px; width: 675px; padding-top: 20px; height:500px;} .clear{ clear:both} </style> </head> <!--选项卡开始--> <div class="tab_box"> <div class="lyz_tab_left"> <div class="pro_con111"> <ul> <li class="hover" id="one1" οnclick="setTab('one',1,5)">公司简介</li> <li id="one2" οnclick="setTab('one',2,5)">服务理念 </li> <li id="one3" οnclick="setTab('one',3,5)">服务流程</li> <li id="one4" οnclick="setTab('one',4,5)">服务标准</li> <li id="one5" οnclick="setTab('one',5,5)">服务资质</li> </ul> </div> <script language="javascript"> <!-- function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </div> <div class="lyz_tab_right"> <div class="hover" id="con_one_1">公司简介内容</div> <div class="hover" id="con_one_2" style="display: none">服务理念内容</div> <div class="hover" id="con_one_3" style="display: none">服务流程内容</div> <div class="hover" id="con_one_4" style="display: none">服务标准内容</div> <div class="hover" id="con_one_5" style="display: none">服务资质内容</div> </div> <div class="clear"></div> <!--选项卡结束--> </div> </body> </html>