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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
angular动态表单制作
Feb 23 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 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的安全
2006/10/09 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php实现的通用图片处理类
2015/03/24 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
JS实现多选框的操作
2020/06/24 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python中set常用操作汇总
2016/06/30 Python
Python实现全排列的打印
2018/08/18 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
企业管理毕业生求职信
2014/03/11 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
英语教学课后反思
2016/02/15 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
Golang连接并操作MySQL
2022/04/14 MySQL