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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
JS提交form表单实例分析
Dec 10 Javascript
微信JS接口大全
Aug 25 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 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 版本]
2007/03/20 PHP
PHP数据过滤的方法
2013/10/30 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
js 如何实现对数据库的增删改查
2012/11/23 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
跟老齐学Python之用Python计算
2014/09/12 Python
python操作redis的方法
2015/07/07 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python3 map函数和filter函数详解
2019/08/26 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
护校行动方案
2014/05/31 职场文书
幼儿老师求职信
2014/06/30 职场文书
会计专业求职信
2014/08/10 职场文书
募捐感谢信
2015/01/22 职场文书
金陵十三钗观后感
2015/06/04 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技