编程 Javascript

通过onmouseover选项卡实现img图片的变化

Posted in Javascript onFebruary 12, 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>选项卡实现img图片的变换</title> 
<style type="text/css"> 
#main{ height:420px; width:400px;} 
#head{ 
width:400px; 
height:52px; 
position:absolute; 
left:10px; 
top: -12px; 
background-color:green; 
} 
#head li{ float:left; list-style:none; width:85px;} 
#content{ 
width:400px; 
height:350px; 
background-color:#FC6; 
text-align:center; 
position:absolute; 
top:36px; 
left: 10px; 
} 
</style> 
</head> <body> 
<div id="main"> 
<div id="head"> 
<ul> 
<li id="tab1" onmouseover="show(1)" style="background-color:#FFF">图片一</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"><img src="图片0"/></p> 
<p id="p2" style="display:none;"><img src=“图片1”></p> 
<p id="p3" style="display:none;"><img src="图片2" height="320px;"/></p> 
<p id="p4" style="display:none;"><img src="图片3"/></p> 
</div> 
</div> 
</body> 
<script> 
function show(n){ 
for(var i=1;i<=4;i++){ 
document.getElementById("tab"+i).style.backgroundColor='green'; 
document.getElementById("p"+i).style.display='none'; 
//display实现内容的隐藏与否的控制，当为none是，隐藏 
} 
document.getElementById("tab"+n).style.backgroundColor='white'; 
document.getElementById("p"+n).style.display='block'; 
//当block时，隐藏的即可显示 
} 
</script> 
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

懒就要懒到底——鼠标自动点击（含时间判断）

Feb 20 Javascript

JS去除右边逗号的简单方法

Jul 03 Javascript

js实现弹出窗口、页面变成灰色并不可操作的例子分享

May 10 Javascript

JavaScript判断文件上传类型的方法

Sep 02 Javascript

常用的JavaScript WEB操作方法分享

Feb 28 Javascript

javascript中indexOf技术详解

May 07 Javascript

关于JavaScript作用域你想知道的一切

Feb 04 Javascript

深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解

Apr 03 Javascript

前端分页功能的实现以及原理（jQuery）

Jan 22 Javascript

解决vue router使用 history 模式刷新后404问题

Jul 19 Javascript

深入了解JavaScript 防抖和节流

Sep 12 Javascript

vue实现点击按钮下载文件功能

Oct 11 Javascript

JavaScript中创建对象和继承示例解读

Feb 12 #Javascript

javascript实现文本域写入字符时限定字数

Feb 12 #Javascript

js 绑定键盘鼠标事件示例代码

Feb 12 #Javascript

动态加载jquery库的方法

Feb 12 #Javascript

jquery实现页面图片等比例放大缩小功能

Feb 12 #Javascript

javascript获取web应用根目录的方法

Feb 12 #Javascript

使用javascript控制cookie显示和隐藏背景图

Feb 12 #Javascript