如何让鼠标经过这个网页中的div层时自动打开?
实例网页:<!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>无标题文档</title>
<link href="JMenuTabRes3/JMenuTab.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="JMenuTabRes3/JMenuTab.js"></script>
<style type="text/css">
<!--
#right { border:2px
width:100px;
height:300px;
position:absolute;
right:8px;
top:0px;
}
.STYLE1 {font-size: 12px}
-->
</style>
</head><body>
<div id="page"><!--33资料-->
<center>
</center></div>
<div id="page1"><!--2资料-->
<center>
</center>
</div>
<div id="page2">Help!Help!</div>
<div id="page3"><!--1资料-->
<center>
</center>
</div>
<div id="page4">Help!Help!</div>
<div id="page5">Help!Help!</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var menuTab = new JMenuTab(null,null,"menuBar");
menuTab.create();
menuTab.setSkin("JMenuTabBlue");
menuTab.addTab("4资料","page");
menuTab.addTab("3资料","page1");
menuTab.addTab("员工信息","page2");
menuTab.addTab("1资料","page3");
menuTab.addTab("2结管理","page4");
menuTab.addTab("1资料","page5");
menuTab.setActiveTab(2);
</script>
</script>

解决方案 »

  1.   

    JMenuTab.js:[code=JScriptfunction] JMenuTab(pWidth,pHeight,pBody){
    var self = this;

    var width = pWidth || "100%";
    var height = pHeight;

    this.titleHeight = 24;
    var oOutline = null;
    var oTitleOutline = null;
    var oPageOutline = null;
    var oTitleArea = null;
    var oPageArea = null;

    var tabArray = new Array();
    this.activedTab = null;
    this.onTabChange = new Function();

    var $ = function(pObjId){
    return document.getElementById(pObjId);
    }


    var body = $(pBody) || document.body;


    var htmlObject = function(pTagName){
    return document.createElement(pTagName);
    }


    var isRate = function(pRateString){
    if(!isNaN(pRateString)) return false;
    if(pRateString.substr(pRateString.length-1,1) != "%")
    return false;
    if(isNaN(pRateString.substring(0,pRateString.length - 1)))
    return false;
    return true;
    }


    var createOutline = function(){

    var width_ = isRate(width) ? width : (!isNaN(width) ? width + "px" : "100%");

    oOutline = htmlObject("DIV");
    body.appendChild(oOutline);
    oOutline.style.width = width_;
    }


    var createTitleOutline = function(){
    oTitleOutline = htmlObject("DIV");
    oOutline.appendChild(oTitleOutline);
    oTitleOutline.className = "oTitleOutline";

    var vTable = htmlObject("TABLE");
    oTitleOutline.appendChild(vTable);
    vTable.width = "60%";
    vTable.border = 0;
    vTable.cellSpacing = 0;
    vTable.cellPadding = 0;
    vTable.align="center";

    var vTBody = htmlObject("TBODY");
    vTable.appendChild(vTBody);

    var vTr1 = htmlObject("TR");
    vTBody.appendChild(vTr1);

    var vTdTopLeft = htmlObject("TD");
    vTr1.appendChild(vTdTopLeft);
    vTdTopLeft.height = self.titleHeight;
    vTdTopLeft.className = "oTopLeft";

    oTitleArea = htmlObject("TD");
    vTr1.appendChild(oTitleArea);
    oTitleArea.className = "oTitleArea";

    var vTdTopRight = htmlObject("TD");
    vTr1.appendChild(vTdTopRight);
    vTdTopRight.className = "oTopRight";
    }

    this.setTitleHeight = function(pHeight){
    }

    var tabBtn_click = function(){
    self.setActiveTab(this.index);
    }

    var tabBtn_mouseover = function(){
    if(this.className =="oTabBtnActive")
    return;

    this.className = "oTabBtnHover";
    }

    var tabBtn_mouseout = function(){
    if(this.className =="oTabBtnActive")
    return;
    this.className = "oTabBtn";
    }

    var createTabBtn = function(pLabel,pTabPage){
    var vTabBtn = htmlObject("DIV");
    oTitleArea.appendChild(vTabBtn);
    vTabBtn.className = "oTabBtn";
    //////////////////////////////////
    vTabBtn.index = tabArray.length;
    vTabBtn.label = pLabel;
    vTabBtn.tabPage = pTabPage;
    //////////////////////////////////
    vTabBtn.onclick = tabBtn_click;
    vTabBtn.onmouseover = tabBtn_mouseover;
    vTabBtn.onmouseout = tabBtn_mouseout;

    tabArray.push(vTabBtn);

    var vTabBtnL = htmlObject("DIV");
    vTabBtn.appendChild(vTabBtnL);
    vTabBtnL.className = "oTabBtnLeft";

    vTabBtnC = htmlObject("DIV");
    vTabBtn.appendChild(vTabBtnC);
    vTabBtnC.className = "oTabBtnCenter";
    vTabBtnC.innerHTML = pLabel;

    vTabBtnR = htmlObject("DIV");
    vTabBtn.appendChild(vTabBtnR);
    vTabBtnR.className = "oTabBtnRight";
    }


    var createPageOutline = function(){
    oPageOutline = htmlObject("DIV");
    oOutline.appendChild(oPageOutline);
    oPageOutline.className = "oPageOutline";

    var vTable = htmlObject("TABLE");
    oPageOutline.appendChild(vTable);
    vTable.width = "60%";
    vTable.border = 0;
    vTable.cellSpacing = 0;
    vTable.cellPadding = 0;
    vTable.style.borderCollapse = "collapse";
    vTable.style.tableLayout="fixed";
    vTable.align="center";

    var vTBody = htmlObject("TBODY");
    vTable.appendChild(vTBody);

    var vTr1 = htmlObject("TR");
    vTBody.appendChild(vTr1);

    var vTdBottomLeft = htmlObject("TD");
    vTr1.appendChild(vTdBottomLeft);
    vTdBottomLeft.className = "oBottomLeft";
    vTdBottomLeft.rowSpan = 2;

    oPageArea = htmlObject("TD");
    vTr1.appendChild(oPageArea);
    oPageArea.className = "oPageArea";
    if(oPageArea.filters)
    oPageArea.style.cssText = "FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward');";
    oPageArea.height = 10;

    var vTdBottomRight = htmlObject("TD");
    vTr1.appendChild(vTdBottomRight);
    vTdBottomRight.className = "oBottomRight";
    vTdBottomRight.rowSpan = 2;

    var vTr2 = htmlObject("TR");
    vTBody.appendChild(vTr2);

    var vTdBottomCenter = htmlObject("TD");
    vTr2.appendChild(vTdBottomCenter);
    vTdBottomCenter.className = "oBottomCenter";
    }


    this.addTab = function (pLabel,pPageBodyId){
    createTabBtn(pLabel,pPageBodyId);
    if($(pPageBodyId)){
    oPageArea.appendChild($(pPageBodyId));
    $(pPageBodyId).style.display = "none";
    }
    }


    this.setActiveTab = function(pIndex){
    if(oPageArea.filters)
    oPageArea.filters[0.apply();

    if(self.activedTab != null){
    self.activedTab.className = "oTabBtn";
    if($(self.activedTab.tabPage))
    $(self.activedTab.tabPage).style.display = "none";
    }

    var oldTab = self.activedTab;
    self.activedTab = tabArray[pIndex];
    self.onTabChange(oldTab,self.activedTab);//自定义事件,两个参数分别是先前的活动页签和现在活动的页签的index。
    self.activedTab.className = "oTabBtnActive";
    if($(self.activedTab.tabPage))
    $(self.activedTab.tabPage).style.display = "";

    if(oPageArea.filters)
    oPageArea.filters[0].play(duration=1);
    };

    this.create = function(){
    createOutline();
    createTitleOutline();
    createPageOutline();
    }
    }[/code]
      

  2.   

    #JMenuTabBlue {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 2px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    }
    #JMenuTabBlue .oInnerline {
    background-color: #FFFFFF;
    }
    #JMenuTabBlue .oTitleOutline {
    height: 24px;
    color: #FFFFFF;
    overflow:hidden;
    }#JMenuTabBlue .oTitleOutline .oTopLeft {
    width:3px;
    background-image: url(left.gif);
    background-repeat: no-repeat;
    }
    #JMenuTabBlue .oTitleOutline .oTitleArea {
    background-image: url(mid.gif);
    }
    #JMenuTabBlue .oTitleOutline .oTopRight {
    width:3px;
    background-image: url(right.gif);
    background-repeat: no-repeat;
    }
    /*--------------------------------------------*/
    #JMenuTabBlue .oTabBtn {
    float: left;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 2px;
    cursor: pointer;
    }
    #JMenuTabBlue .oTabBtn a{
    text-decoration:none;
    color: #FFFFFF;
    }
    #JMenuTabBlue .oTabBtn .oTabBtnLeft{
    float:left;
    }
    #JMenuTabBlue .oTabBtn .oTabBtnCenter{
    line-height:24px;
    float:left;
    }
    #JMenuTabBlue .oTabBtn .oTabBtnRight{
    float:left;
    }/*------------------------------------------*/#JMenuTabBlue .oTabBtnActive {
    float: left;
    height: 24px;
    }#JMenuTabBlue .oTabBtnActive a{
    text-decoration:none;
    color:#666666;
    }#JMenuTabBlue .oTabBtnActive .oTabBtnRight {
    background-image: url(activeRight.gif);
    float: left;
    height: 100%;
    width: 3px;
    }
    #JMenuTabBlue .oTabBtnActive .oTabBtnLeft {
    background-image: url(activeLeft.gif);
    background-repeat: no-repeat;
    float: left;
    width: 3px;
    height:100%;
    }
    #JMenuTabBlue .oTabBtnActive .oTabBtnCenter {
    background-image: url(activeMid.gif);
    float:left;
    height:100%;
    color: #666666;
    line-height:24px;
    padding-left:3px;
    padding-right:3px;
    cursor:pointer;
    }/*-----------------------------------*/
    #JMenuTabBlue .oTabBtnHover {
    float: left;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 2px;
    cursor: pointer;
    }
    #JMenuTabBlue .oTabBtnHover a{
    text-decoration:none;
    color:#FF9900;
    }
    #JMenuTabBlue .oTabBtnHover .oTabBtnLeft{
    float:left;
    }
    #JMenuTabBlue .oTabBtnHover .oTabBtnCenter{
    line-height:24px;
    float:left;
    }
    #JMenuTabBlue .oTabBtnHover .oTabBtnRight{
    float:left;
    }
    /*------------------------------------*/#JMenuTabBlue .oPageOutline .oBottomLeft {
    background-image: url(bottomLeft.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 3px;
    }
    #JMenuTabBlue .oPageOutline .oPageArea {
    background-image: url(bottomMid.gif);
    background-repeat: repeat-x;
    padding:10px 10px 5px 10px;
    }
    #JMenuTabBlue .oPageOutline .oBottomRight {
    background-image: url(bottomRight.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    width: 3px;
    }
    #JMenuTabBlue .oPageOutline .oBottomCenter {
    background-image: url(bottomMid.gif);
    background-repeat: repeat-x;
    background-position: bottom;
    height: 3px;
    }
      

  3.   

    什么叫div自动打开?
    你是想收缩 与 展示 div么?这无怪乎就是offsetHeight的改变 写一个函数处理0-最大值/最大值-0  不就可以伸展了?
    如果只是鼠标经过就显示出来 你控制css visibility:visible/hidden 就可以了
    如果你是display的 那么你需要有一个存在的父元素
    事件 onmouseover onmouseout onmousemove