DIV 切换(二)
程序员文章站
2022-07-14 16:43:04
...
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Servlet service</title>
<link type="text/css" href="css/firstpage.css" rel="stylesheet"></link>
</head>
<script language="javascript">
<!--
function mc(divnum,obj,divname,handlename,sname,noname)
{
//关于层切换的js
//定义显示层 数组，
var target = new Array(divnum) ;
var d = new Array(divnum) ;
for(var i=0;i<divnum;i++){
target[i]=divname+eval(i+1);
//定义层的手柄（主要是更换背景用得）
d[i]=handlename+eval(i+1);
}
// 循环操作div
for(var i=0;i<divnum;i++)
{
if(i==obj)
{
var v=document.getElementById(target[i]);
var bg=document.getElementById(d[i]);
bg.className=sname;
v.style.display="block";
}
else
{
var bg=document.getElementById(d[i]);
var v=document.getElementById(target[i]);
bg.className=noname;
v.style.display="none";
}
}
}
-->
</script>
<body>
<div id="rightnews1">
<div class="jumpmenu1">
<div id="topnew1" onmouseover="mc(3,0,'content','topnew','smenu','menu')" class="smenu"> 新闻中心</div>
<div id="topnew2" onmouseover="mc(3,1,'content','topnew','smenu','menu')" class="menu"> 热点聚焦</div>
<div id="topnew3" onmouseover="mc(3,2,'content','topnew','smenu','menu')" class="menu"> 行业动态</div>
</div>
<div id="content1" >111111111111</div>
<div id="content2" class="hidecontent">2222222222222</div>
<div id="content3" class="hidecontent">3333333333</div>
</div>
js 函数可以直接调用
<!--
/**************
*div切换函数的解释
*mc（div 层的个数,传入对象id，div层的名字，手柄的名字，鼠标离开后的图片，鼠标离开前的图片）
*注意：层和手柄的名字都不包括数字
**************/
-->
<script language="javascript">
<!--
function mc(divnum,obj,divname,handlename,offpic,onpic)
{
//关于层切换的js
//定义显示层 数组，
var target = new Array(divnum) ;
var d = new Array(divnum) ;
for(var i=0;i<divnum;i++){
target[i]=divname+eval(i+1);
//定义层的手柄（主要是更换背景用得）
d[i]=handlename+eval(i+1);
}
// 循环操作div
for(var i=0;i<divnum;i++)
{
if(i==obj)
{
var v=document.getElementById(target[i]);
var bg=document.getElementById(d[i]);
v.style.display="block";
//鼠标移动过后的图片
bg.background=offpic;
}
else
{
var bg=document.getElementById(d[i]);
var v=document.getElementById(target[i]);
v.style.display="none";
//鼠标放在手柄上的图片
bg.background=onpic;
}
}
}
-->
</script>
<table width="586" height="121" border="1">
<tr style="cursor:pointer">
<td onMouseOver="mc(4,0,'div','d','33.jpg','22.jpg')" background="33.jpg" id="d1">层一</td>
<td onMouseOver="mc(4,1,'div','d','33.jpg','22.jpg')" background="22.jpg" id="d2">层二 </td>
<td onMouseOver="mc(4,2,'div','d','33.jpg','22.jpg')" background="22.jpg" id="d3">层三</td>
<td onMouseOver="mc(4,3,'div','d','33.jpg','22.jpg')" background="22.jpg" id="d4">层四</td>
</tr>
<tr>
<td colspan="4">
<div id="div1">11111111111111111111</div>
<div id="div2" style="display:none">222222222222222</div>
<div id="div3" style="display:none">333333333333333</div>
<div id="div4" style="display:none">4444444444444444</div></td>
</tr>
</table>
</body>
</html>
上一篇： 原生js实现拖拽