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获取网页中的js、css、Flash等文件
Dec 20 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
微信小程序多音频播放进度条问题
Aug 28 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实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
Python处理文本换行符实例代码
2018/02/03 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
员工培训心得体会
2013/12/30 职场文书
励志演讲稿800字
2014/08/21 职场文书
公司授权委托书范本
2014/09/18 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript