用JS写原生的选项卡
2016-05-01 01:31
417 查看
<!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" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
p,div,a{margin:0;padding:0;}
body{font-size:12px;line-height:20px;}
#box{width:300px;}
#tag{border-bottom:3px solid #C2130E;height:21px;}
#tag p{float:left;line-height:21px;text-align:center;cursor:pointer;}
#tag .topTitle{font-weight:bold;width:117px;}
#tag .topOut{background:#dcdcdc;border-left:2px solid #f2f2f2;width:40px;}
#tag .topOver{background:#c2130e;border-left:2px solid #f2f2f2;width:40px;color:#fff;cursor:pointer;}
#content{background:url(bg.gif) no-repeat 8px 13px;line-height:26px;padding-top:7px;padding-left:40px;height:260px;}
#content .zero{line-height:0px;}
#content a:link,#content a:visited{text-decoration:none;color:silver;}
#content a:hover{text-decoration:none;color:red;}
.show{display:block}
.hide{display:none}
</style>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
//定义一个变量
var flag =4;
//先加载事件
window.onload=function(){
//先获取p和span集合
var pj =document.getElementById("tag").getElementsByTagName("p");
var spj=document.getElementById("content").getElementsByTagName("span");
//遍历
for(var i=1;i<pj.length;i++){
//定义一个自定义属性
pj[i].ind=i;
spj[i].className="hide";
pj[i].onmouseover=function(){
pj[flag].className="topOut";
spj[flag].className="hide";
pj[this.ind].className="topOver";
spj[this.ind].className="show";
flag=this.ind;
}
}
//设置初始显示的P很span
pj[flag].className="topOver";
spj[flag].className="show";
}
</script>
</head>
<body>
<div id="box">
<div id="tag">
<P class="topTitle">新闻排行</P>
<P class="topOut">国内</P>
<P class="topOut">国际</P>
<P class="topOut">社会</P>
<P class="topOut">网评</P>
</div>
<div id="content">
<span class="zero" title="Don't delete me"></span>
<span>
<a href="#" target="_self">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a><br/>
<a href="#" target="_self">最高法:承诺不判赖昌星死刑没有超越法律程序</a><br/>
<a href="#" target="_self">物权法:满70年住宅建设用地使用权将自动续期</a><br/>
<a href="#" target="_self">弟弟被妻下药毒死男子买女尸为其配阴婚(图)</a><br/>
<a href="#" target="_self">揭开郑州神枪手神秘面纱 头号狙击手是近视眼</a><br/>
<a href="#" target="_self">美军高官:不排除和中国发生直接军事对抗可能</a><br/>
<a href="#" target="_self">浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</a><br/>
<a href="#" target="_self">西方炒作"中国航母威胁论"称05年已正式服役</a><br/>
<a href="#" target="_self">女孩生活无法自理请人大代表递交安乐死议案</a><br/>
<a href="#" target="_self">建设部：住房公积金制度将覆盖农民工</a><br/>
<div align="right"><a href="#" target="_self">...more</a></div>
</span>
<span>
<a href="#" target="_self">美华裔女兵在营房上吊死亡军方介入调查(图)</a><br/>
<a href="#" target="_self">组图：美国总统布什车队被撞</a><br/>
<a href="#" target="_self">梦露掌握肯尼迪之弟秘密遭诱骗自杀(组图)</a><br/>
<a href="#" target="_self">孟加拉国严打贪官人人自危奔驰宝马抛弃路边</a><br/>
<a href="#" target="_self">韩国将举行大规模军事演习(图文)</a><br/>
<a href="#" target="_self">组图：土星最大卫星表面发现“海洋”</a><br/>
<a href="#" target="_self">墨西哥缉毒行动缴获2亿美元巨额现钞(组图)</a><br/>
<a href="#" target="_self">组图：全球掀起裸体抗议加拿大捕猎海豹活动</a><br/>
<a href="#" target="_self">美潜艇在百慕大失踪一晚航母战群出动搜索</a><br/>
<a href="#" target="_self">匈牙利20万人示威 政要被民众扔鸡蛋(组图)</a><br/>
<div align="right"><a href="#" target="_self">...more</a></div>
</span>
<span>
<a href="#" target="_self">深圳女工被三名男子轮奸男友目睹过程(组图)</a><br/>
<a href="#" target="_self">男子珍藏一角钱“币王”价格高达1.3万(图)</a><br/>
<a href="#" target="_self">青海女孩被困洗头房每天接客十几次(图)</a><br/>
<a href="#" target="_self">组图：老妻少夫演绎忘年恋69岁妻子成功除皱</a><br/>
<a href="#" target="_self">陕西蓝田县电视台播放淫秽影像 达10分钟左右</a><br/>
<a href="#" target="_self">女子自称被大学教授诱骗同居讨要分手费(图)</a><br/>
<a href="#" target="_self"> 李克强鼓励“创客”小伙伴：众人拾柴火焰高</a><br/>
<a href="#" target="_self">组图：四川泸州16岁女孩打造中国第一丑女</a><br/>
<a href="#" target="_self">最高法:承诺不判赖昌星死刑没有超越法律程序</a><br/>
<a href="#" target="_self">深圳发现睾丸被摘男童尸体续：疑为1月前失踪</a><br/>
<div align="right"><a href="#" target="_self">...more</a></div>
</span>
<span>
<a href="#" target="_self">养路费征稽员强制扣车致三轮车夫惨死车轮下</a><br/>
<a href="#" target="_self">20多位学者谈中医问题 方舟子遭多名专家批驳</a><br/>
<a href="#" target="_self">考研女生自称揭露监考老师作弊 成绩被判零分</a><br/>
<a href="#" target="_self">全国政协委员建议一户一房制引起网民热议</a><br/>
<a href="#" target="_self">河南周口市6名警察将人打昏后扔下楼摔死</a><br/>
<a href="#" target="_self">组图：69岁老妻除皱成功 与少夫开始新生活</a><br/>
<a href="#" target="_self">青海女孩被困洗头房每天接客十几次(图)</a><br/>
<a href="#" target="_self">美上将：解放军不是美军对手 导弹打不垮台湾</a><br/>
<a href="#" target="_self">新疆阜康铁路桥梁坍塌导致运煤列车脱轨</a><br/>
<a href="#" target="_self">铁道部回应吴敬琏质疑:春运不涨价将长期坚持</a><br/>
<div align="right"><a href="#" target="_self">...more</a></div>
</span>
</div>
</div>
</body>
</html>
效果图如下：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
p,div,a{margin:0;padding:0;}
body{font-size:12px;line-height:20px;}
#box{width:300px;}
#tag{border-bottom:3px solid #C2130E;height:21px;}
#tag p{float:left;line-height:21px;text-align:center;cursor:pointer;}
#tag .topTitle{font-weight:bold;width:117px;}
#tag .topOut{background:#dcdcdc;border-left:2px solid #f2f2f2;width:40px;}
#tag .topOver{background:#c2130e;border-left:2px solid #f2f2f2;width:40px;color:#fff;cursor:pointer;}
#content{background:url(bg.gif) no-repeat 8px 13px;line-height:26px;padding-top:7px;padding-left:40px;height:260px;}
#content .zero{line-height:0px;}
#content a:link,#content a:visited{text-decoration:none;color:silver;}
#content a:hover{text-decoration:none;color:red;}
.show{display:block}
.hide{display:none}
</style>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
//定义一个变量
var flag =4;
//先加载事件
window.onload=function(){
//先获取p和span集合
var pj =document.getElementById("tag").getElementsByTagName("p");
var spj=document.getElementById("content").getElementsByTagName("span");
//遍历
for(var i=1;i<pj.length;i++){
//定义一个自定义属性
pj[i].ind=i;
spj[i].className="hide";
pj[i].onmouseover=function(){
pj[flag].className="topOut";
spj[flag].className="hide";
pj[this.ind].className="topOver";
spj[this.ind].className="show";
flag=this.ind;
}
}
//设置初始显示的P很span
pj[flag].className="topOver";
spj[flag].className="show";
}
</script>
</head>
<body>
<div id="box">
<div id="tag">
<P class="topTitle">新闻排行</P>
<P class="topOut">国内</P>
<P class="topOut">国际</P>
<P class="topOut">社会</P>
<P class="topOut">网评</P>
</div>
<div id="content">
<span class="zero" title="Don't delete me"></span>
<span>
<a href="#" target="_self">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a><br/>
<a href="#" target="_self">最高法:承诺不判赖昌星死刑没有超越法律程序</a><br/>
<a href="#" target="_self">物权法:满70年住宅建设用地使用权将自动续期</a><br/>
<a href="#" target="_self">弟弟被妻下药毒死男子买女尸为其配阴婚(图)</a><br/>
<a href="#" target="_self">揭开郑州神枪手神秘面纱 头号狙击手是近视眼</a><br/>
<a href="#" target="_self">美军高官:不排除和中国发生直接军事对抗可能</a><br/>
<a href="#" target="_self">浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</a><br/>
<a href="#" target="_self">西方炒作"中国航母威胁论"称05年已正式服役</a><br/>
<a href="#" target="_self">女孩生活无法自理请人大代表递交安乐死议案</a><br/>
<a href="#" target="_self">建设部：住房公积金制度将覆盖农民工</a><br/>
<div align="right"><a href="#" target="_self">...more</a></div>
</span>
<span>
<a href="#" target="_self">美华裔女兵在营房上吊死亡军方介入调查(图)</a><br/>
<a href="#" target="_self">组图：美国总统布什车队被撞</a><br/>
<a href="#" target="_self">梦露掌握肯尼迪之弟秘密遭诱骗自杀(组图)</a><br/>
<a href="#" target="_self">孟加拉国严打贪官人人自危奔驰宝马抛弃路边</a><br/>
<a href="#" target="_self">韩国将举行大规模军事演习(图文)</a><br/>
<a href="#" target="_self">组图：土星最大卫星表面发现“海洋”</a><br/>
<a href="#" target="_self">墨西哥缉毒行动缴获2亿美元巨额现钞(组图)</a><br/>
<a href="#" target="_self">组图：全球掀起裸体抗议加拿大捕猎海豹活动</a><br/>
<a href="#" target="_self">美潜艇在百慕大失踪一晚航母战群出动搜索</a><br/>
<a href="#" target="_self">匈牙利20万人示威 政要被民众扔鸡蛋(组图)</a><br/>
<div align="right"><a href="#" target="_self">...more</a></div>
</span>
<span>
<a href="#" target="_self">深圳女工被三名男子轮奸男友目睹过程(组图)</a><br/>
<a href="#" target="_self">男子珍藏一角钱“币王”价格高达1.3万(图)</a><br/>
<a href="#" target="_self">青海女孩被困洗头房每天接客十几次(图)</a><br/>
<a href="#" target="_self">组图：老妻少夫演绎忘年恋69岁妻子成功除皱</a><br/>
<a href="#" target="_self">陕西蓝田县电视台播放淫秽影像 达10分钟左右</a><br/>
<a href="#" target="_self">女子自称被大学教授诱骗同居讨要分手费(图)</a><br/>
<a href="#" target="_self"> 李克强鼓励“创客”小伙伴：众人拾柴火焰高</a><br/>
<a href="#" target="_self">组图：四川泸州16岁女孩打造中国第一丑女</a><br/>
<a href="#" target="_self">最高法:承诺不判赖昌星死刑没有超越法律程序</a><br/>
<a href="#" target="_self">深圳发现睾丸被摘男童尸体续：疑为1月前失踪</a><br/>
<div align="right"><a href="#" target="_self">...more</a></div>
</span>
<span>
<a href="#" target="_self">养路费征稽员强制扣车致三轮车夫惨死车轮下</a><br/>
<a href="#" target="_self">20多位学者谈中医问题 方舟子遭多名专家批驳</a><br/>
<a href="#" target="_self">考研女生自称揭露监考老师作弊 成绩被判零分</a><br/>
<a href="#" target="_self">全国政协委员建议一户一房制引起网民热议</a><br/>
<a href="#" target="_self">河南周口市6名警察将人打昏后扔下楼摔死</a><br/>
<a href="#" target="_self">组图：69岁老妻除皱成功 与少夫开始新生活</a><br/>
<a href="#" target="_self">青海女孩被困洗头房每天接客十几次(图)</a><br/>
<a href="#" target="_self">美上将：解放军不是美军对手 导弹打不垮台湾</a><br/>
<a href="#" target="_self">新疆阜康铁路桥梁坍塌导致运煤列车脱轨</a><br/>
<a href="#" target="_self">铁道部回应吴敬琏质疑:春运不涨价将长期坚持</a><br/>
<div align="right"><a href="#" target="_self">...more</a></div>
</span>
</div>
</div>
</body>
</html>
效果图如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js正则表达式语法
- 解决ajax不能访问本地文件（利用js跨域原理）
- JS基准测试: console.time 与 console.timeEnd
- JavaScript中的继承之类继承
- JS实现左右无缝轮播图代码
- JavaScript 跨域的实现方法
- js中的$和#
- 如何在js中使用递归
- LokiJS入门demo1
- Json.Net学习笔记
- JS如何实现导航栏的智能浮动
- JS如何实现导航栏的智能浮动
- FullPage.js全屏滚动插件
- 典型jsp用户注册处理页面
- JS设计模式
- javascript笔记—— 构造函数
- 把cookie以json形式返回，用js来set cookie.（解决手机浏览器未知情况下获取不到cookie）
- servlet、jsp跳转(传值)总结及URL传参数
- javascript 抽奖
- JavaScript函数表达式和闭包