DIV 切换(2)

DIV 切换(二)

<%@ 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">&nbsp;新闻中心</div>
    <div id="topnew2"  onmouseover="mc(3,1,'content','topnew','smenu','menu')" class="menu">&nbsp;&nbsp;热点聚焦</div>
    <div id="topnew3"  onmouseover="mc(3,2,'content','topnew','smenu','menu')" class="menu">&nbsp;&nbsp;行业动态</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>
1 楼 dimingchan 2012-01-03
相关推荐
