tab切换2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
//导航显示隐藏
function clickaction(obj,idstart,idend){
for(var i=idstart;i<=idend;i++){if(obj=="nav"+i){
document.getElementById("nav"+i).className='button-on';
document.getElementById("mod"+i).style.display='block';
}else{
document.getElementById("nav"+i).className='button-over';
document.getElementById("mod"+i).style.display='none';
}
}
}
</script>
<style type="text/css">
/*left start*/
body,ul,li{margin:0; padding:0;}
.left-bg{width:221px; float:left; background-color:#013463; height:745px; background:url(../images/center-left.jpg) repeat-x #013463;}
.button-over{width:198px; background:url(../images/button1.gif) no-repeat 0px -35px; height:35px; margin:auto;color:#ffffff; line-height:35px; cursor:pointer; margin-top:18px; }
.button-on{width:198px; background:url(../images/button1.gif) no-repeat 0px -0px; height:35px; margin:auto;color:#ffffff; line-height:35px; cursor:pointer; text-decoration:underline; margin-top:18px;}
.nav{margin-left:18px; text-decoration:none; font-size:15px; color:#ffffff}
.nav a{ text-decoration:none; font-size:15px; color:#ffffff}
.nav a:hover{ text-decoration:underline; font-size:15px; color:#ffffff}
.nav-jt{background:url(../images/nav2-bg.png) no-repeat; width:194px; margin:auto;clear:both; padding-top:1px;}
.nav-jt ul{list-style-image:url(../images/jt.png);}
.nav-jt ul a{ color:#ffffff; font-size:14px; text-decoration:none;}
.nav-jt ul a:hover{ color:#ffffff; font-size:14px; text-decoration:underline;}
</style>
</head>
<body>
<div class="left-bg">
<!--1-->
<div class="button-on" id="nav1" onclick="clickaction('nav1','1','11')" >
<div class="nav">SmartCon 7 Code</div>
</div>
<div class="nav-jt" id="mod1" >
<ul>
<li><a href="#">Smartcom 7 Code</a></li>
<li><a href="#">Smartcom 7 Code</a></li>
<li><a href="#">Smartcom 7 Code</a></li>
</ul>
</div>
<!--2-->
<div class="button-over" id="nav2" onclick="clickaction('nav2','1','11')" >
<div class="nav">
<a href="#">Account</a>
</div>
</div>
<div class="nav-jt" id="mod2" style="display:none;">
<ul>
<li><a href="#">Smartcom 7 Code</a></li>
<li><a href="#">Smartcom 7 Code</a></li>
<li><a href="#">Smartcom 7 Code</a></li>
</ul>
</div>
<!--3-->
<div class="button-over" id="nav3" onclick="clickaction('nav3','1','11')" >
<div class="nav">
<a href="#">Pepresentatives</a>
</div>
</div>
<div class="nav-jt" id="mod3" style="display:none;">
<ul>
<li><a href="#">Smartcom 7 Code</a></li>
<li><a href="#">Smartcom 7 Code</a></li>
</ul>
</div>
</div>
</body></html>
