标签页代码展示
分类：电脑知识 发表于：2010-12-21 12:53:38 评论(2)
标签页代码展示:
<div title="点击查看效果" style="border:1px solid #C0C0C0; CURSOR: pointer; padding-left:10px; padding-right:10px; line-height:150%;" onclick="preWin=window.open(′′,′′,′′);preWin.document.open();preWin.document.write(this.innerText);preWin.document.close();">
<!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>
<style>
<!--
* {
list-style-type:none;
font-size:12px;
text-decoration:none;
margin:0;
padding:0;
}
.woaicss {
width:560px;
height:310px;
overflow:hidden;
margin:50px auto;
}
.woaicss_title {
width:560px;
height:28px;
background:#fff url(01.jpg) no-repeat;
overflow:hidden;
}
.woaicss_title li {
display:block;
float:left;
margin:0 3px 0 0;
display:inline;
text-align:center;
}
.woaicss_title li a {
display:block;
width:109px;
heigth:28px;
line-height:34px;
color:#333;
}
.woaicss_title li a:hover {
color:#06f;
text-decoration:underline;
}
.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -58px;}
.woaicss_title_bg4 {background-position:0 -88px;}
.woaicss_title_bg5 {background-position:0 -117px;}
.woaicss_con {
display:block;
width:560px;
height:305px;
padding-top:8px;
background:url(02.jpg) no-repeat 0 -1px;
}
-->
</style>
<script>
function woaicssq(num){
for(var id = 1;id<=5;id++ )
{
var MrJin="woaicss_con" +id;
if(id==num)
document.getElementById(MrJin).style.display="block";
else
document.getElementById(MrJin).style.display="none";
}
if(num==1)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1";
if(num==2)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
if(num==3)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3";
if(num==4)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
if(num==5)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg5";
}
</script>
</head>
<body>
<div class="woaicss">
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(1)">标签1</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(2)">标签2</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(3)">标签3</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(4)">标签4</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(5)">标签5</a></li>
</ul>
<div style="clear:both;"></div>
<div class="woaicss_con" id="woaicss_con1" style="display:block;">标签1</div>
<div class="woaicss_con" id="woaicss_con2" style="display:none;">标签2</div>
<div class="woaicss_con" id="woaicss_con3" style="display:none;">标签3</div>
<div class="woaicss_con" id="woaicss_con4" style="display:none;">标签4</div>
<div class="woaicss_con" id="woaicss_con5" style="display:none;">标签5</div>
</div>
</body>
</html></div>
