海量企業(yè)網(wǎng)站模板 · 任您選擇
美出特色，精出品質(zhì)，一切為了企業(yè)更好的營銷
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>純CSS簡潔的TAB切換效果</title>
<style type="text/css">
<!--
body, div, ul, li { margin:0 auto; padding:0; }
body { font:12px "宋體"; text-align:center; }
a:link { color:#00F; text-decoration:none; }
a:visited { color: #00F; text-decoration:none; }
a:hover { color: #c00; text-decoration:underline; }
ul { list-style:none; }
.main { clear:both; padding:8px; text-align:center; }
/*第一種形式*/
#tabs0 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb; }
.menu0 { width: 400px; }
.menu0 li { display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; background: #FFFFff; }
.menu0 li.hover { background: #f2f6fb; }
#main0 ul { display: none; }
#main0 ul.block { display: block; }
/*第二種形式*/
#tabs1 { text-align:left; width:400px; }
.menu1box { position:relative; overflow:hidden; height:22px; width:400px; text-align:left; }
#menu1 { position:absolute; top:0; left:0; z-index:1; }
#menu1 li { float:left; display:block; cursor:pointer; width:72px; text-align:center; line-height:21px; height:21px; }
#menu1 li.hover { background:#fff; border-left:1px solid #333; border-top:1px solid #333; border-right:1px solid #333; }
.main1box { clear:both; margin-top:-1px; border:1px solid #333; height:181px; width:400px; }
#main1 ul { display: none; }
#main1 ul.block { display: block; }
/*第三種形式*/
.menu2box { position:relative; overflow:hidden; height:22px; width:400px; text-align:left; background: #FFFFff; }
#tabs2 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb; }
#tip2 { position:absolute; top:0; left:0; height:22px; line-height:22px; z-index:0; width:100px; background: #f2f6fb; }
#menu2 { position:absolute; top:0; left:0; z-index:1; }
#menu2 li { display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; }
-->
</style>
<script>
<!--
/*第一種形式 第二種形式 更換顯示樣式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
/*第三種形式 利用一個(gè)背景層定位*/
var m3={0:"",1:"評論內(nèi)容",2:"技術(shù)內(nèi)容",3:"點(diǎn)評內(nèi)容"}
function nowtab(m,n){
if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3[n];
}
//-->
</script>
</head>
<body>
<!--第一種形式-->
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新聞</li>
<li onclick="setTab(0,1)">評論</li>
<li onclick="setTab(0,2)">技術(shù)</li>
<li onclick="setTab(0,3)">點(diǎn)評</li>
</ul>
<div class="main" id="main0">
<ul class="block">
<li>新聞列表</li>
</ul>
<ul>
<li>評論列表</li>
</ul>
<ul>
<li>技術(shù)列表</li>
</ul>
<ul>
<li>點(diǎn)評列表</li>
</ul>
</div>
</div>
<br />
<br />
<!--第二種形式-->
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" onmouseover="setTab(1,0)"><a href="#">新聞</a></li>
<li onmouseover="setTab(1,1)"><a href="#">評論</a></li>
<li onmouseover="setTab(1,2)"><a href="#">技術(shù)</a></li>
<li onmouseover="setTab(1,3)"><a href="#">點(diǎn)評</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block">
<li>新聞列表</li>
</ul>
<ul>
<li>評論列表</li>
</ul>
<ul>
<li>技術(shù)列表</li>
</ul>
<ul>
<li>點(diǎn)評列表</li>
</ul>
</div>
</div>
</div>
<br />
<br />
<!--第三種形式-->
<div id="tabs2">
<div class="menu2box">
<div id="tip2"></div>
<ul id="menu2">
<li class="hover" onmouseover="nowtab(2,0)"><a href="#">新聞</a></li>
<li onmouseover="nowtab(2,1)"><a href="#">評論</a></li>
<li onmouseover="nowtab(2,2)"><a href="#">技術(shù)</a></li>
<li onmouseover="nowtab(2,3)"><a href="#">點(diǎn)評</a></li>
</ul>
</div>
<div class="main" id="main2"> 新聞內(nèi)容 </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html></td>
</tr>
</table>
蘇公網(wǎng)安備32058302005702號