HTML页面简单TAB

最新推荐文章于 2024-04-10 00:52:35 发布

shmily1819

最新推荐文章于 2024-04-10 00:52:35 发布

阅读量225

点赞数

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>简洁Tab</title> 
<style type="text/css"> 
<!-- 
body,div,ul,li{ 
padding:0; 
text-align:center; 
} 
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;} 
/*选项卡1*/ 
#Tab1{ 
width:60%; 
margin:0px; 
padding:0px; 
margin:0 auto;} 
/*选项卡2*/ 
#Tab2{ 
width:100%; 
margin:0px; 
padding:0px; 
margin:0 auto;} 
/*菜单class*/ 
.Menubox { 
width:100%; 
background:#fff; 
height:28px; 
line-height:28px; 
} 
.Menubox ul{ 
margin:0px; 
padding:0px; 
} 
.Menubox li{ 
float:left; 
display:block; 
cursor:pointer; 
width:49.5%; 
text-align:center; 
color:#000; 
font-weight:bold; 
} 
.Menubox li.hover{ 
padding:0px;  
width:49.5%; 
border-left:1px solid #A8C29F; 
border-top:1px solid #A8C29F; 
border-right:1px solid #A8C29F; 
background:#20FF60;
color:#fff; 
font-weight:bold; 
height:27px; 
line-height:27px; 
} 
.Contentbox{ 
clear:both; 
margin-top:5%; 
border-top:none; 
height:181px; 
text-align:center; 
padding-top:8px; 
} 
--> 
</style> 
<script> 

/*第一种形式 第二种形式 更换显示样式*/ 
function setTab(name,cursel,n){ 
for(i=1;i<=n;i++){ 
var menu=document.getElementById(name+i); 
var con=document.getElementById("con_"+name+"_"+i); 
menu.className=i==cursel?"hover":""; 
con.style.display=i==cursel?"block":"none"; 
} 
} 

</script> 
</head> 
<body>


 
<div id="Tab1"> 
	<div class="Menubox"> 
		<ul> 
			<li id="one1" onClick="setTab('one',1,2)" class="hover">新闻1</li> 
			<li id="one2" onClick="setTab('one',2,2)" >新闻2</li> 
		</ul> 
	</div> 
</div>
<div class="Contentbox"> 
	<div id="con_one_1" class="hover">新闻列表1</div> 
	<div id="con_one_2" style="display:none">新闻列表2</div> 
</div> 


 
</body>