html兑现标签页功能 _HTML/CSS

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 class="tabs">
<li class="up"><a href="#" 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="tab">
? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>1.dkjldfld</li>
? ? ? ? ? ? ? ? <li>2.dkfdlsld</li>
? ? ? ? ? ? ? ? <li>3.dkfdlsld</li>
? ? ? ? ? ? ? ? <li>4.dkfdlsld</li>
? ? ? ? ? ? ? ? <li>5.dkflskdvs</li>
? ? ? ? </ul>
</div>
<div id="tab2" class="tab2">
? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>5.dkflskdvs</li>
? ? ? ? ? ? ? ? <li>4.dkjldfld</li>
? ? ? ? ? ? ? ? <li>3.dkfdlsld</li>
? ? ? ? ? ? ? ? <li>2.dkfdlsld</li>
? ? ? ? ? ? ? ? <li>1.dkfdlsld</li>? ? ? ? ? ? ? ?
? ? ? ? </ul>
</div>

<div id="tab3" class="tab2">
? ? ? ? <ol>
? ? ? ? ? ? ? ? <li>#.dkflskdvs</li>
? ? ? ? ? ? ? ? <li>#.dkjldfld</li>
? ? ? ? ? ? ? ? <li>#.dkfdlsld</li>
? ? ? ? ? ? ? ? <li>#.dkfdlsld</li>
? ? ? ? ? ? ? ? <li>#.dkfdlsld</li>? ? ? ? ? ? ? ?
? ? ? ? </ol>
</div>

</body>

</html>