JS的UL下LI隔行变色划过变色

最新推荐文章于 2021-07-16 21:19:32 发布

dhpob48203567

最新推荐文章于 2021-07-16 21:19:32 发布

阅读量481

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/cnfiowen/archive/2009/06/22/1508422.html

版权

支持控制多个UL变色

测试ie6/7/FF都通过;CSS和JS完全分离;加了部分注释

<! 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=gb2312" />
< title > 无标题文档 </ title >
< style type ="text/css" >
.container ul { margin : 0 ; padding : 0 ; }
.container li { cursor : pointer ; height : 30px ; width : 200px ; background-color : #FFC ; line-height : 30px ; text-indent : 1em ; font-size : 12px ; }
.container .change { cursor : pointer ; height : 30px ; width : 200px ; background-color : #C1F9CC ; line-height : 30px ; text-indent : 1em ; font-size : 12px ; }
.container .current { cursor : pointer ; height : 30px ; width : 200px ; background-color : #F66 ; line-height : 30px ; text-indent : 1em ; font-size : 12px ; }
</ style >
< script type ="text/javascript" >
window.onload = function () {
    changeColor( ' content ' );
    changeColor( ' content2 ' ); // 写上要控制的UL的ID，想控制几个就控制几个
    changeColor( ' content3 ' );
}
function changeColor(id) {
     var arrayli = document.getElementById(id).getElementsByTagName( ' li ' );
         var bool = true ; // 奇数行为true
         var oldStyle; // 保存原有样式
         for ( var i = 0 ;i < arrayli.length;i ++ ){
             // 各行变色
             if (bool === true ){
                arrayli[i].className = " change " ;
                bool = false ;
            }
             else {
                arrayli[i].className = "" ;
                bool = true ;
            }
             // 划过变色
            arrayli[i].onmouseover = function () {
                oldStyle = this .className;
                 this .className = " current "
            }
            arrayli[i].onmouseout = function () {
                 this .className = oldStyle;
            }
        }
}
</ script >
</ head >
< body >
     < span > 第一个UL </ span >
     < div class ="container" >
         < ul id ="content" >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
         </ ul >
     </ div >
     < br />
     < span > 第二个UL </ span >
     < div class ="container" >
         < ul id ="content2" >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
         </ ul >
     </ div >
     < span > 第三个UL </ span >
     < div class ="container" >
         < ul id ="content3" >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
             < li > 隔行变色，划过变色 </ li >
         </ ul >
     </ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/cnfiowen/archive/2009/06/22/1508422.html