【Javascript】选项卡效果

<!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=gb2312" />
<title>选项卡效果</title>
<style type="text/css">
body{
margin:80px 0 0 200px;
padding:0;
width:1024px;
border:0;
background:#fff;
color:#000;
line-height:18px;
font-family:'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',verdana,sans-serif;
font-size:12px;
}

a{color:#000; text-decoration:none;}
a.a_cha0:link{color:#9e9e9e; display:block; width:108px; height:27px; text-decoration:none}
a.a_cha0:visited{color:#9e9e9e; display:block; width:108px; height:27px; text-decoration:none}
a.a_cha0:hover{color:#37790D; font-weight:bold; background:#ffffff; display:block; width:108px; height:27px; text-decoration:none}

#show{ background:#E1FCC7; width:440px; margin:0; padding:10px;}
#show_cont{ margin:0; padding:0; width:436px; height:300px; background:#fff; border:1px #BEC0D5 solid;}
.show_title{ float:left; height:28px; width:100%; background:url(http://www.cbiw.com.cn/email_z/images/bg_show_title.gif) left 0 repeat-x;}
.show_title ul{ list-style-type:none; margin:0; padding:0;}
.show_title li{float:left; width:108px; height:28px; text-align:center; border-right:1px #BEC0D5 solid;}
.show_p10{ padding-top:5px;}
.show_tex{ margin:0; padding:0; float:left; width:436px; overflow:hidden; }

.show_tab{color:#37790D; font-weight:bold; background:#fff; width:108px; height:28px;}
</style>
</head>
<script language="JavaScript" type="text/javascript">
function setFocus1(i)
{
selectLayer1(i);
}
function selectLayer1(i)                                              //目前定义了3个版块具体拿出计划来再定

{
switch(i)
{
case 1:
document.getElementById("focusPic1").style.display="block";          //图1
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic1nav").style.display="block";
document.getElementById("focusPic2nav").style.display="none";
document.getElementById("focusPic3nav").style.display="none";
break;
case 2:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="block";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic1nav").style.display="none";
document.getElementById("focusPic2nav").style.display="block";
document.getElementById("focusPic3nav").style.display="none";
break;
case 3:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="block";
document.getElementById("focusPic1nav").style.display="none";
document.getElementById("focusPic2nav").style.display="none";
document.getElementById("focusPic3nav").style.display="block";
break;
}
}
</script>
<body>
    <div id="show">
<div id="show_cont">

<div class="show_title" id="focusPic1nav" style="display: none;">
<ul>
<li class="show_tab"><div class="show_p10">最新招商</div></li>
<li><a href="javascript:setFocus1(2);" target="_self" class="a_cha0"><div class="show_p10">行业资讯</div></a></li>
<li><a href="javascript:setFocus1(3);" target="_self" class="a_cha0"><div class="show_p10">美容人才</div></a></li>
</ul>
</div>


    <div class="show_title" id="focusPic2nav" style="display: block;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self" class="a_cha0"><div class="show_p10">最新招商</div></a></li>
<li class="show_tab"><div class="show_p10">行业资讯</div></li>
<li><a href="javascript:setFocus1(3);" target="_self" class="a_cha0"><div class="show_p10">美容人才</div></a></li>
</ul>
</div>

<div class="show_tex" id="focusPic2" style="display: block;"><b>选项卡效果：A</b></div>
<div class="show_tex" id="focusPic1" style="display: none;"><b>选项卡效果：B</b></div>
<div class="show_tex" id="focusPic3" style="display: none;"><b>选项卡效果：C</b></div>

</div>
</div>

</body>
</html>
http://www.visc.cn/blog/post/129.html

posted on 2007-04-14 09:41 mbskys 阅读(1289) 评论(0) 收藏举报