JavaScript之QQ列表

最新推荐文章于 2021-06-04 19:57:09 发布

可芭乐

最新推荐文章于 2021-06-04 19:57:09 发布

阅读量503

点赞数 1

分类专栏：小作品文章标签： javascript

本文链接：https://blog.csdn.net/a839371666/article/details/53675722

版权

小作品专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript之QQ列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    ul,h2 {
        padding: 0;
        margin: 0;
    }
    li {
        list-style: none;
    }
    #list {
        width: 240px;
        border: 1px solid #333;
        margin: 0 auto;
    }
    #list .lis{

    } 
    #list h2 {
        height: 30px;
        line-height: 30px;
        text-indent: 20px;
        background: url(../picture/menu1.png) no-repeat 5px center blue;
        color: #fff;
    }
    #list .active {
        background: url(../picture/menu2.png) no-repeat 5px center #132db0;
        color: #fff;
    }
    #list ul{
        display: none;
    }
    #list ul li {
        line-height: 24px;
        border-bottom: 1px solid #333;
        text-indent: 24px;
    }
    #list ul .hover {
        background: #8ea1fe;
    }
</style>
<script type="text/javascript">
    window.onload = function(){
        var oUL = document.getElementById('list');
        var aH2 = oUL.getElementsByTagName('h2');
        var aUL = oUL.getElementsByTagName('ul');
        var aLi = null;
        var arrLi =[];

        for(var i=0;i<aH2.length;i++){
            aH2[i].index = i;
            aH2[i].onclick = function(){

                if (this.className == '') {
                    aUL[this.index].style.display = 'block';
                this.className = 'active';
            } 
                else {
                    aUL[this.index].style.display = 'none';
                    this.className = '';
                }
            }
        }
        for (var i=0;i<aUL.length;i++){
            aLi = aUL[i].getElementsByTagName('li');
            for (var j=0;j<aLi.length;j++){
                arrLi.push(aLi[j]);
            }
        }
        for(var i=0;i<arrLi.length;i++){
            arrLi[i].onclick = function(){
                for(var i=0;i<arrLi.length;i++){
                    arrLi[i].className='';
                }
                this.className='hover';
            }
        }
    }
</script>
</head>
<body>
    <ul id="list">
        <li class="lis">
            <h2>人物介绍1</h2>
            <ul>
                <li>人物1</li>
                <li>人物2</li>
                <li>人物3</li>
                <li>人物4</li>
                <li>人物5</li>
            </ul>
        </li>
        <li class="lis">
            <h2>人物介绍2</h2>
            <ul>
                <li>人物1</li>
                <li>人物2</li>
                <li>人物3</li>
                <li>人物4</li>
                <li>人物5</li>
            </ul>
        </li>
        <li class="lis">
            <h2>人物介绍3</h2>
            <ul>
                <li>人物1</li>
                <li>人物2</li>
                <li>人物3</li>
                <li>人物4</li>
                <li>人物5</li>
            </ul>
        </li>
    </ul>
</body>
</html>