导航栏底色变色

第一种

 

<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>

第二种

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>
 
展开阅读全文

没有更多推荐了,返回首页