JS实现切换标签页效果实例代码


Posted in Javascript onNovember 01, 2013

在网页<head>区添加以下代码

<style type="text/css">  
<!--  
BODY {  
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center  
}  
.dis {  
DISPLAY: block  
}  
.undis {  
DISPLAY: none  
}  
#cntR {  
WIDTH: 302px  
}  
#NewsTop {  
CLEAR: both; MARGIN-BOTTOM: 16px  
}  
#NewsTop P {  
FLOAT: left; LINE-HEIGHT: 21px  
}  
#NewsTop P.topTit {  
FONT-WEIGHT: bold; WIDTH: 117px  
}  
#NewsTop P.topC0 {  
BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer  
}  
#NewsTop P.topC1 {  
BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff  
}  
#NewsTop #NewsTop_tit {  
BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px  
}  
#NewsTop #NewsTop_cnt {  
PADDING-LEFT: 32px; BACKGROUND: url(https://3water.com/code/table/tab/o2007320133249.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left  
}  
#NewsTop #NewsTop_cnt A {  
COLOR: #666; TEXT-DECORATION: none  
}  
#NewsTop #NewsTop_cnt A:hover {  
COLOR: #c2130e; TEXT-DECORATION: underline  
}  
--> 
</style>

在网页<body>区添加以下代码
<DIV id=cntR>  
<DIV id=NewsTop>  
<DIV id=NewsTop_tit>  
<P class=topTit>新闻排行</P>  
<P class=topC0>国内</P>  
<P class=topC0>国际</P>  
<P class=topC0>社会</P>  
<P class=topC0>网评</P>  
</DIV>  
<DIV id=NewsTop_cnt><SPAN title="Don't delete me"></SPAN>  
<SPAN>  
<A href="https://3water.com" target=_self>三水点靠木</A><BR>  
<A href="http://play.3water.com" target=_self>播放器之家</A><BR>  
<A href="http://mingzi.3water.com" target=_self>个性名字网</A><BR>  
<A href="http://office.3water.com" target=_self>Office之家</A><BR>  
<A href="http://sc.3water.com" target=_self>素材之家</A><BR>  
<A href="http://yueduqi.3water.com" target=_self>阅读器之家</A><BR>  
<div align="right"><A href="https://3water.com" target=_self>...more</A></div>  
</SPAN>  
<SPAN>  
<A href="https://3water.com" target=_self>三水点靠木</A><BR>  
<A href="http://play.3water.com" target=_self>播放器之家</A><BR>  
<A href="http://mingzi.3water.com" target=_self>个性名字网</A><BR>  
<A href="http://office.3water.com" target=_self>Office之家</A><BR>  
<A href="http://sc.3water.com" target=_self>素材之家</A><BR>  
<A href="http://yueduqi.3water.com" target=_self>阅读器之家</A><BR>  
<div align="right"><A href="https://3water.com" target=_self>...more</A></div>  
</SPAN>  
<SPAN>  
<A href="https://3water.com" target=_self>三水点靠木</A><BR>  
<A href="http://play.3water.com" target=_self>播放器之家</A><BR>  
<A href="http://mingzi.3water.com" target=_self>个性名字网</A><BR>  
<A href="http://office.3water.com" target=_self>Office之家</A><BR>  
<A href="http://sc.3water.com" target=_self>素材之家</A><BR>  
<A href="http://yueduqi.3water.com" target=_self>阅读器之家</A><BR> 
<div align="right"><A href="https://3water.com" target=_self>...more</A></div>  
</SPAN>  
<SPAN>  
<A href="https://3water.com" target=_self>三水点靠木</A><BR>  
<A href="http://play.3water.com" target=_self>播放器之家</A><BR>  
<A href="http://mingzi.3water.com" target=_self>个性名字网</A><BR>  
<A href="http://office.3water.com" target=_self>Office之家</A><BR>  
<A href="http://sc.3water.com" target=_self>素材之家</A><BR>  
<A href="http://yueduqi.3water.com" target=_self>阅读器之家</A><BR> 
<div align="right"><A href="https://3water.com" target=_self>...more</A></div>  
</SPAN>  
</DIV>  
<SCRIPT>  
var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p');  
var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span');  
var len=Tags.length;  
var flag=1;//修改默认值  
for(i=1;i<len;i++){  
Tags[i].value = i;  
Tags[i].onmouseover=function(){changeNav(this.value)};  
TagsCnt[i].className='undis';  
}  
Tags[flag].className='topC1';  
TagsCnt[flag].className='dis';  
function changeNav(v){  
Tags[flag].className='topC0';  
TagsCnt[flag].className='undis';  
flag=v;  
Tags[v].className='topC1';  
TagsCnt[v].className='dis';  
}  
</SCRIPT>  
</DIV>  
</DIV>
Javascript 相关文章推荐
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
Javascript delete 引用类型对象
Nov 01 #Javascript
理解Javascript闭包
Nov 01 #Javascript
Javascript 命名空间模式
Nov 01 #Javascript
完美解决AJAX跨域问题
Nov 01 #Javascript
javascript中创建对象的几种方法总结
Nov 01 #Javascript
如何学习Javascript入门指导
Nov 01 #Javascript
js动态设置鼠标事件示例代码
Oct 30 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
学习ExtJS form布局
2009/10/08 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
JQuery基础语法小结
2015/02/27 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
js实现录音上传功能
2019/11/22 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
应届生人事助理求职信
2013/11/09 职场文书
爽歪歪广告词
2014/03/20 职场文书
给老婆的保证书范文
2014/04/28 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
小学新教师个人总结
2015/02/05 职场文书
公务员处分决定书
2015/06/25 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
java解析XML详解
2021/07/09 Java/Android
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS