<!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>
<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>
