霍者博客

div各行变色代码

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div各行变色代码</title>
<style type="text/css">
.container ul{margin:0;padding:0;}
.container li{cursor:pointer;height:30px;width:200px;background-color:#fff;line-height:30px; text-indent:1em;font-size:12px;}
.container .change{cursor:pointer;height:30px;width:200px;background-color:#ccc;line-height:30px; text-indent:1em;font-size:12px;}
.container .current{cursor:pointer;height:30px;width:200px;background-color:#ffc;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>

其实除了上面的用到的js以外,单纯的使用CSS3里的伪类:nth-child也是可以做出这个效果的。

使用伪类:nth-child做出各行变色的效果

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/241.html,标题:div各行变色代码

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。