JavaScript实现mop新闻动态图
来源：互联网 发布：列主元高斯消去法编程 编辑：程序博客网 时间：2024/04/30 02:51
<html>
<head>
<style type='text/css'>
*{margin:0;padding:0;border:0;}
#main{width:300px;height:300px;background-color:green}
#head{height:50px;background-color:red}
#head li{float:left;list-style:none;text-align:center;margin-right:3px;width:72px;line-height:50px;background-color:orange}
</style>
</head>
<body>
<div id='main'>
<div id='head'>
<ul>
<li id='tab1' onmouseover='show(1)' style='background-color:green'>新闻</li>
<li id='tab2' onmouseover='show(2)'>体育</li>
<li id='tab3' onmouseover='show(3)'>音乐</li>
<li id='tab4' onmouseover='show(4)'>娱乐</li>
</ul>
</div>
<div id='content'>
<p id='p1'>呵呵呵</p>
<p id='p2' style='display:none'>法克鱿</p>
<p id='p3' style='display:none'>史珍香</p>
<p id='p4' style='display:none'>欧码噶</p>
</div>
</div>
</body>
<script>
function show(n){
for(var i = 1; i<5 ; i++){
document.getElementById('tab'+i).style.backgroundColor = 'orange';
document.getElementById('p'+i).style.display = 'none';
}
document.getElementById('tab'+n).style.backgroundColor = 'green';
document.getElementById('p'+n).style.display = 'block';
}
</script>
</html>
<head>
<style type='text/css'>
*{margin:0;padding:0;border:0;}
#main{width:300px;height:300px;background-color:green}
#head{height:50px;background-color:red}
#head li{float:left;list-style:none;text-align:center;margin-right:3px;width:72px;line-height:50px;background-color:orange}
</style>
</head>
<body>
<div id='main'>
<div id='head'>
<ul>
<li id='tab1' onmouseover='show(1)' style='background-color:green'>新闻</li>
<li id='tab2' onmouseover='show(2)'>体育</li>
<li id='tab3' onmouseover='show(3)'>音乐</li>
<li id='tab4' onmouseover='show(4)'>娱乐</li>
</ul>
</div>
<div id='content'>
<p id='p1'>呵呵呵</p>
<p id='p2' style='display:none'>法克鱿</p>
<p id='p3' style='display:none'>史珍香</p>
<p id='p4' style='display:none'>欧码噶</p>
</div>
</div>
</body>
<script>
function show(n){
for(var i = 1; i<5 ; i++){
document.getElementById('tab'+i).style.backgroundColor = 'orange';
document.getElementById('p'+i).style.display = 'none';
}
document.getElementById('tab'+n).style.backgroundColor = 'green';
document.getElementById('p'+n).style.display = 'block';
}
</script>
</html>
- JavaScript实现mop新闻动态图
- 新闻动态
- JavaScript实现Mop自动切换的图片新闻框子
- 业界新闻动态
- Groovy探索之MOP 四 使用ExpandoMetaClass来实现Mixin
- 洪武三十二新闻动态
- 廊坊最新新闻动态
- 廊坊最新新闻动态
- 转载mop
- Groovy MOP
- Groovy MOP实现mini-language 如传说中Java7.0的XML嵌入式语法
- Groovy MOP实现mini-language 如传说中Java7.0的XML嵌入式语法
- Groovy探索之MOP 十六 使用Interceptor实现简单的观察家模式
- MOP生存指南
- MOP CSS攻略
- MOP 堕落了
- CSDN与MOP
- MOP 是什么 （入门）
- 子域父域互相管理
- DOTNET零碎要点---vb.net获取combox的选中值,删除Datagridview,选中值,处理提示框...
- zoj1005 广搜
- 常备十大开源工具
- 杭电ACM1003 求最大子序列和问题
- JavaScript实现mop新闻动态图
- 通过onmouseover实现图片的变化 选项卡
- strcpy，strncpy和strncpy_s的区别
- 乱码问题解决方法
- 字符串函数 值的互换
- 正则表达式详解
- 用js实现复选框的反选和全选和全不选
- hdu 2089 不要62
- Communicate between objects
