html实现标签页功能
<html>
<head>
<style type="text/css">
body{
? ? ? ? margin: 0;
? ? ? ? padding: 0;
}
.tabs{
? ? ? ? width: 100%;
? ? ? ? margin: 0;
? ? ? ? padding: 4px 0 0 4px ;
? ? ? ? list-style: none;
? ? ? ? background: #fff url(img02/nav_gb2.gif) repeat-x bottom left;
? ? ? ? font-size: 12px;
? ? ? ? border-bottom: none;
}
.tabs li{
? ? ? ? float: left;
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? ? font-family: "宋体", sans-serif;
}
.tabs a{
? ? ? ? float: left;
? ? ? ? display: block;
? ? ? ? margin: 0 1px 0 0;
? ? ? ? padding: 4px 8px;
? ? ? ? color: #333;
? ? ? ? text-decoration: none;
? ? ? ? border: 1px solid #d2d2d2;
? ? ? ? border-bottom: none;
? ? ? ? background: #fff;
}
.tabs a:hover , body .up a{
? ? ? ? color: #333;
? ? ? ? padding-bottom: 5px;
? ? ? ? border-color: #d2d2d2;
? ? ? ? background: #f1f1f1;
}
.tab{
? ? ? ? width: 100%;
? ? ? ? margin: 0;
? ? ? ? padding: 4px 0 0 4px;
? ? ? ? border: 1px solid #d2d2d2;
? ? ? ? border-top: none;
? ? ? ? background: #f1f1f1;
}
.tab li{
? ? ? ? float: left;
? ? ? ? padding: 6px;
}
.tab2{
? ? ? ? width: 100%;
? ? ? ? margin: 0;
? ? ? ? padding: 4px 0 0 4px;
? ? ? ? border: 1px solid #d2d2d2;
? ? ? ? border-top: none;
? ? ? ? background: #f1f1f1;
? ? ? ? display:??none;
}
.tab2 li{
? ? ? ? float: left;
? ? ? ? padding: 6px;
}
</style>
<script type="text/javascript">
function showtab(n,count){
? ? ? ? for(var i=1;i<=count;i++){
? ? ? ? ? ? ? ? if (i==n){? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? getObject('tab'+i).style.display='block';
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? ? ? getObject('tab'+i).style.display='none';
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? }
}
function getObject(objectId) {
? ? if(document.getElementById && document.getElementById(objectId)) {
? ? ? ? return document.getElementById(objectId);
? ? } else if (document.all && document.all(objectId)) {
? ? ? ? return document.all(objectId);
? ? } else if (document.layers && document.layers[objectId]) {
? ? ? ? return document.layers[objectId];
? ? } else {
? ? ? ? return false;
? ? }
}
</script>
</head>
<body>
<ul rel="external" onmousemove="showtab(1,3);" id="a1">> XHTML学习</a></li>
<li><a href="#" rel="external" onmousemove="showtab(2,3);" id="a2">> 网站设计</a></li>
<li><a href="#" rel="external" onmousemove="showtab(3,3);" id="a3">> 我的收藏</a></li>
</ul>
<div id="tab1" class="tab2">
? ? ? ? <ol>
? ? ? ? ? ? ? ? <li>#.dkflskdvs</li>
? ? ? ? ? ? ? ? <li>#.dkjldfld</li>
? ? ? ? ? ? ? ? <li>#.dkfdlsld</li>
? ? ? ? ? ? ? ? <li>#.dkfdlsld</li>
? ? ? ? ? ? ? ? <li>#.dkfdlsld</li>? ? ? ? ? ? ? ?
? ? ? ? </ol>
</div>
</body>
</html>
