欢迎来到酷云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

纯CSS简洁的TAB切换效果代码

       Tabs     2016-02-16     eycms     57     0    

<!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"; 

/*第三种形式 利用一个背景层定位*/ 

var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"} 

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)">技术</li> 

<li onclick="setTab(0,3)">点评</li> 

</ul> 

<div class="main" id="main0"> 

<ul class="block"> 

<li>新闻列表</li> 

</ul> 

<ul> 

<li>评论列表</li> 

</ul> 

<ul> 

<li>技术列表</li> 

</ul> 

<ul> 

<li>点评列表</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="#">技术</a></li> 

<li onmouseover="setTab(1,3)"><a href="#">点评</a></li> 

</ul> 

</div> 

<div class="main1box"> 

<div class="main" id="main1"> 

<ul class="block"> 

<li>新闻列表</li> 

</ul> 

<ul> 

<li>评论列表</li> 

</ul> 

<ul> 

<li>技术列表</li> 

</ul> 

<ul> 

<li>点评列表</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="#">技术</a></li> 

<li onmouseover="nowtab(2,3)"><a href="#">点评</a></li> 

</ul> 

</div> 

<div class="main" id="main2"> 新闻内容 </div> 

</div> 

<br /> 

<br /> 

<br /> 

<br /> 

<br /> 

<br /> 

<br /> 

<br /> 

</body> 

</html></td>

 </tr>

</table>


--结束END--

本文链接: http://www.83703228.cn/resources/tabs/1143.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“酷云”
"酷云平台前端开发教学"
每日干货技术分享
 

×

成为 酷云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

酷云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 3206174

客服电话: 0516-83703228

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

酷云平台手机端