注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

js小项目1:仿网易首页tab标签v3.01  

2014-03-13 16:12:50|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 效果图:
js小项目1:仿网易首页tab标签v3.01 - 湖小叶叶 - 米欧光影工作室

效果描述:
1)鼠标移到哪个标签,其对应的内容就显示出来;
2)标签样式同时改变。
3)鼠标移出时最后选中的标签和内容继续显示;




源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿网易tab3.01</title>


<style>
/*--------初始化------------*/
body,html,div,ul,ol,li{padding:0; margin:0;}
img{border:none;}
a {color:#252525; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}



/*-------外框定位------*/
#tabDiv1{ width:500px; overflow:hidden; margin:10px auto; }


/*-------标签区------*/
.tab{ border-top: 2px solid #206F96; font: 12px/1.5 宋体b8b\4f53,Arial,sans-serif;
background:#fafafa; }
.tab ul{ height:30px; line-height: 30px;
background:#F7F7F7;
overflow: hidden;
border-left:1px solid #CFCFCF;
}

.tab ul li{ list-style:none; display:block; float:left; line-height:30px;
padding:0 5px; border-right: 1px solid #CFCFCF;

font-size: 14px;
text-align: center;
cursor: pointer;

background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(254, 254, 254)), to(rgb(237, 237, 237)));
background-image: -webkit-linear-gradient(top, rgb(254, 254, 254), rgb(237, 237, 237));
background-image: -moz-linear-gradient(top, rgb(254, 254, 254), rgb(237, 237, 237));
background-image: -o-linear-gradient(top, rgb(254, 254, 254), rgb(237, 237, 237));
background-image: -ms-linear-gradient(top, rgb(254, 254, 254), rgb(237, 237, 237));
background-image: linear-gradient(top, rgb(254, 254, 254), rgb(237, 237, 237));
}
.tab ul li.cur,
.tab ul li:hover{
background: #fff;
}

/*-------内容区------*/
.tab div{width:500px; position:relative; display:none;
border-top: 1px solid #CFCFCF;
padding:5px 10px;}
.tab div p{
height: 27px;
line-height: 27px;
font-size: 14px;}
.tab div.current{ display:block;}


/*-------隔离区------*/
.bold{font-weight:bold;}
.clear{ display:block;overflow:hidden; clear:both; width:100%; height:20px;}
.clearfix{*zoom:1;}
.clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
</style>
</head>
<body>

<div style='width:800px; margin:0 auto;'>
<span class='bold'>仿163首页tab效果:小空间、更多内容</span><br />
添加新标签方法:只需要修改html即可(增加标签li,增加内容部分div)。<br />
添加新标签模块方法:复制整个div,然后改id,再在onload中初始化辞div即可;

</div>

<div class='clear'></div>


<!--------------效果展示区------------------->
<div id='tabDiv1'>
<div class='tab'>
<ul>
<li class="cur">1国内</li>
<li>2国际</li>
<li>3教育培训类</li>
<li>4八卦</li>
</ul>

<div class='current'>
<p><a class='bold' target='_blank' href='http://news.163.com'>网易新闻频道</a></p>
<p><a target='_blank' href='http://www.163.com'>A123</a></p>
<p><a target='_blank' href='http://www.163.com'>A123</a></p>
<p><a target='_blank' href='http://www.163.com'>A123</a></p>
</div>

<div>
<p><a target='_blank' href='http://news.163.com'>网易新闻频道</a></p>
<p><a class='bold' target='_blank' href='http://news.163.com/14/0313/10/9N79SO930001124J.html'>党报问反腐是否一阵风 李克强:有腐必惩</a></p>
<p><a target='_blank' href='http://www.163.com'>A123</a></p>
<p><a target='_blank' href='http://www.163.com'>A123</a></p>
</div>

<div>
<p><a target='_blank' href='http://news.163.com'>网易新闻频道</a></p>
<p><a target='_blank' href='http://www.163.com'>A123</a></p>
<p><a class='bold' target='_blank' href='http://www.baidu.com/'>百度一下 | 你就知道</a></p>
<p><a target='_blank' href='http://www.163.com'>A123</a></p>
</div>

<div>
<p><a target='_blank' href='http://news.163.com'>网易新闻频道</a></p>
<p><a target='_blank' href='http://www.163.com'>A123</a></p>
<p><a target='_blank' href='http://www.163.com'>A123</a></p>
<p><a class='bold' target='_blank' href='http://www.mop.com/'>猫扑大杂烩——中国最具影响力的网络社区</a></p>
</div>

</div>
</div><!--end of tab-->
<!--------------效果展示区--end----------------->


<div class='clear'></div>

<div style="margin:0 auto; width:700px; padding:20px; background:#ff9600; opacity:0.2"> By 米欧互联: <a href='http://miostudio.blog.163.com/' target="_new">bog</a> </div>

<script>
function startTab(obj){
var oTab=document.getElementById(obj).getElementsByTagName("div")[0];//整个tab外框

var aLi=oTab.getElementsByTagName("ul")[0].getElementsByTagName("li");//顶部的标签 数组
var aDiv=oTab.getElementsByTagName("div");//底部显示内容的 数组



for(var i=0; i<aLi.length; i++){
aLi[i].index=i;

aLi[i].onmouseover=function(){
for(var _a=0; _a<aLi.length; _a++){
aLi[_a].className = '';}//清除所有标签的class

this.className = 'cur'; //设置当前标签的class为cur


for(var j=0; j<aDiv.length; j++){
aDiv[j].style.display='none';}//所有的内容都不显示

aDiv[this.index].style.display='block';//显示出与鼠标悬浮标签相应的div

}
}
}


//DOM载入后执行初始化tab标签
window.onload=function(){
startTab('tabDiv1');
}
</script>

</body>
</html>



------------
本文做了改进,onload外dom无关,onload内dom有关,更便于复用;

怎么改成面相对象?
  评论这张
 
阅读(182)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017