隔行变色，划过变色

您现在的位置：.Net中文社区>> 实用代码>>正文内容

隔行变色，划过变色

发布时间：2010年06月22日点击数：次佚名

测试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=utf-8" />

<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() {

        var arrayli = document.getElementById('content').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>

    <div class="container">

        <ul id="content">

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

            <li>隔行变色，划过变色</li>

        </ul>

    </div>

</body>

</html>

效果图如下：

支持多个ul的:【注：下边代码复制即可看到效果】

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

隔行变色，划过变色

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新