2010.05.17———自制tabs选项卡
2010.05.17———自制tabs选项卡
<html>
<head>
<style type="text/css">
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: middle;
text-decoration:none;
}
html{
scrollbar-face-color:#75BDF2;
scrollbar-hightlight-color:red;
scrollbar-shadow-color:#ffffff;
scrollbar-3dlight-color:#3499E0;
scrollbar-arrow-color:#ffffff;
scrollbar-track-color:#C0DAF3;
scrollbar-darkshadow-color:#2C9AEB; }
.panel{
border-top:1px solid #64A8FB; text-align:left; padding-top:4px;
}
ul#nav_list{
margin:0px;
padding:0px;
color:#ffffff;
height:24px;
background:url(images/tab_bg.jpg) bottom repeat-x;
}
ul#nav_list li{
float:left;
background: url(images/tab_list_nomarl.jpg) no-repeat left top;
padding-left:20px;
height:23px;
line-height:23px;
position:relative;
top:1px;
}
ul#nav_list li a{
display:block;
text-align:center;
font-size:13px;
color:#333333;
background: url(images/tab_list_nomarl.jpg) no-repeat right top;
padding-right:20px;
}
ul#nav_list li.slelcted{
float:left;
background: url(images/tab_list_down.jpg) no-repeat left top;
padding-left:20px;
height:23px;
line-height:23px;
}
ul#nav_list li a:hover{
color:#1F82FA;
text-decoration:underline;
}
ul#nav_list li.slelcted a{
text-decoration:none;
background: url(images/tab_list_down.jpg) no-repeat right top;
padding-right:20px;
color:#FFffff;
font-weight:bold;
}
ul#nav_list li.slelcted a:hover{
text-decoration:underline;
color:#fff;
}
</style>
<script type="text/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?"slelcted":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
</head>
<body>
<div id="bottom_info" class="panel" style="width: 100%">
<div id="tab">
<ul id="nav_list">
<li onclick="setTab('one',1,3)" class="slelcted" id="one1"><a >微笑</a></li>
<li onclick="setTab('one',2,3)" id="one2"><a >大笑</a></li>
<li onclick="setTab('one',3,3)" id="one3"><a >猥琐的笑</a></li>
</ul>
</div>
<div id="nav_cont">
<h1 id="con_one_1" class="slelcted">呵呵</h1>
<h1 id="con_one_2" style="display:none;">哈哈</h1>
<h1 id="con_one_3" style="display:none;">嘿嘿</h1>
</div>
</body>
</html>