导航栏底色变色

第一种

 

< style >
td ... {width:50}
</ style >
< script defer >
var  overcolor = ' #cccccc ' ;
var  outcolor = ' #f2f3f7 ' ;
var  clkcolor = ' deeppink ' ;
var  pObj = null ;
for  ( var  i = 0 ;i < phx.rows.length;i ++ ) ... {
    for(var j=0;j<phx.rows[i].cells.length;j++)...{
phx.rows[i].cells[j].onmouseover=function()...{
if(pObj!=this)...{
this.bgColor=overcolor;}}
phx.rows[i].cells[j].onmouseout=function()...{
if(pObj!=this)...{
this.bgColor=outcolor;}}
phx.rows[i].cells[j].onclick=function()...{
pObj=this;
init();
pObj.bgColor=clkcolor;}
    }
}
function  init() ... {
for (var i=0;i<phx.rows.length;i++)...{
    for(var j=0;j<phx.rows[i].cells.length;j++)...{    
phx.rows[i].cells[j].bgColor=outcolor;
    }
}
}
init();
</ script >
< table id = phx >
< tr >< td >& nbsp; </ td >< td >& nbsp; </ td >< td >& nbsp; </ td >< td >& nbsp; </ td ></ tr >< tr >< td >& nbsp; </ td >< td >& nbsp; </ td >< td >& nbsp; </ td >< td >& nbsp; </ td ></ tr >< tr >< td >& nbsp; </ td >< td >& nbsp; </ td >< td >& nbsp; </ td >< td >& nbsp; </ td ></ tr ></ table >

第二种

<script> function mHover(e){ e=window.event?window.event:e; srcEle=e.srcElement?e.srcElement:e.target; if(!srcEle)return; if(String(srcEle.tagName).toLowerCase()!="div")return; if(srcEle.className=="")srcEle.className="menu_hover"; } function mOut(e){ e=window.event?window.event:e; srcEle=e.srcElement?e.srcElement:e.target; if(!srcEle)return; if(String(srcEle.tagName).toLowerCase()!="div")return; if(srcEle.className=="menu_hover")srcEle.className=""; } function mClick(e,obj){ e=window.event?window.event:e; srcEle=e.srcElement?e.srcElement:e.target; if(!srcEle)return; if(String(srcEle.tagName).toLowerCase()!="div")return; if(srcEle==obj.focusedItem)return; if(obj.focusedItem)obj.focusedItem.className=""; srcEle.className="menu_focued"; obj.focusedItem=srcEle; } </script>

Hutia

Hutia

Hutia

Hutia

Hutia

 

< style >
#nb1  ... { width:700px; height:22px; font-size:13px; line-height:22px; border:1px outset buttonface; background-color:#E0DAEF; }
#nb1 div  ... { width:120px; height:22px; margin:0px 1px 0px 0px; padding-left:15px; border-right:1px solid buttonshadow; border-left:1px solid buttonhighlight; cursor:pointer; display:inline-block; float:left; }
.menu_hover  ... { background-color:#E0EFFF; }
.menu_focued  ... { background-color:#D0FAFA; color:red; }
</ style >
< script >
function  mHover(e) ... {
 e=window.event?window.event:e;
 srcEle=e.srcElement?e.srcElement:e.target;
 if(!srcEle)return;
 if(String(srcEle.tagName).toLowerCase()!="div")return;
 if(srcEle.className=="")srcEle.className="menu_hover";
}
function  mOut(e) ... {
 e=window.event?window.event:e;
 srcEle=e.srcElement?e.srcElement:e.target;
 if(!srcEle)return;
 if(String(srcEle.tagName).toLowerCase()!="div")return;
 if(srcEle.className=="menu_hover")srcEle.className="";
}
function  mClick(e,obj) ... {
 e=window.event?window.event:e;
 srcEle=e.srcElement?e.srcElement:e.target;
 if(!srcEle)return;
 if(String(srcEle.tagName).toLowerCase()!="div")return;
 if(srcEle==obj.focusedItem)return;
 if(obj.focusedItem)obj.focusedItem.className="";
 srcEle.className="menu_focued";
 obj.focusedItem=srcEle;
}
</ script >
< div id = " nb1 "  onmouseover = " mHover(arguments[0]); "  onmouseout = " mOut(arguments[0]); "  onclick = " mClick(arguments[0],this); " >
< div > Hutia </ div >< div > Hutia </ div >< div > Hutia </ div >< div > Hutia </ div >< div > Hutia </ div >
</ div >