javascript仿126邮箱TAB切换效果

时间:2024年02月08日

/

来源:网络

/

编辑:佚名

此效果需要鼠标点击才能实现切换。
效果演示:

复制代码
<!-- 
引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程 
Editor:weasle 
Email:weasle@163.com 
QQ:112011531 
--> 
<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:460px; 
margin:0px; 
padding:0px; 
margin:0 auto;} 
/*选项卡2*/ 
#Tab2{ 
width:576px; 
margin:0px; 
padding:0px; 
margin:0 auto;} 
/*菜单class*/ 
.Menubox { 
width:100%; 
background:url(http://www.jb51.net/upload/small/20079299441652.gif); 
height:28px; 
line-height:28px; 

.Menubox ul{ 
margin:0px; 
padding:0px; 

.Menubox li{ 
float:left; 
display:block; 
cursor:pointer; 
width:114px; 
text-align:center; 
color:#949694; 
font-weight:bold; 

.Menubox li.hover{ 
padding:0px; 
background:#fff; 
width:116px; 
border-left:1px solid #A8C29F; 
border-top:1px solid #A8C29F; 
border-right:1px solid #A8C29F; 
background:url(http://www.jb51.net/upload/small/200792994426548.gif); 
color:#739242; 
font-weight:bold; 
height:27px; 
line-height:27px; 

.Contentbox{ 
clear:both; 
margin-top:0px; 
border:1px solid #A8C29F; 
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,4)" class="hover">新闻1</li> 
<li id="one2" onclick="setTab('one',2,4)" >新闻2</li> 
<li id="one3" onclick="setTab('one',3,4)">新闻3</li> 
<li id="one4" onclick="setTab('one',4,4)">新闻4</li> 
</ul> 
</div> 
<div class="Contentbox"> 
<div id="con_one_1" class="hover">新闻列表1</div> 
<div id="con_one_2" style="display:none">新闻列表2</div> 
<div id="con_one_3" style="display:none">新闻列表3</div> 
<div id="con_one_4" style="display:none">新闻列表4</div> 
</div> 
</div> 
<div id="Tab2"> 
<div class="Menubox"> 
<ul> 
<li id="two1" onclick="setTab('two',1,4)" class="hover">新闻1</li> 
<li id="two2" onclick="setTab('two',2,4)" >新闻2</li> 
<li id="two3" onclick="setTab('two',3,4)">新闻3</li> 
<li id="two4" onclick="setTab('two',4,4)">新闻4</li> 
</ul> 
</div> 
<div class="Contentbox"> 
<div id="con_two_1" >新闻列表1</div> 
<div id="con_two_2" style="display:none">新闻列表2</div> 
<div id="con_two_3" style="display:none">新闻列表3</div> 
<div id="con_two_4" style="display:none">新闻列表4</div> 
</div> 
</div> 
</body>
复制代码
猜你需要

豫ICP备2021026617号-1  豫公网安备:41172602000185   Copyright © 2021-2028 www.78moban.com/ All Rights Reserved

本站作品均来自互联网,转载目的在于传递更多信息,并不代表本站赞同其观点和对其真实性负责。如有侵犯您的版权,请联系 1565229909#qq.com(把#改成@),我们将立即处理。