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 相关文章推荐
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
jQuery聚合函数实例
May 21 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php join函数应用
2011/05/04 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
深入了解python列表(LIST)
2020/06/08 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
经典演讲稿范文
2013/12/30 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
十八大标语口号
2014/10/09 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
酒店宣传语大全
2015/07/13 职场文书
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技