【js-tab切换】

最新推荐文章于 2024-11-07 13:38:59 发布

柒一’

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量117

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_67969470/article/details/128154607

版权

效果图

在这里插入图片描述

<style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 900px;
            list-style: none;
            overflow: hidden;
            margin: 50px auto;
        }
        #ull li{
            width: 300px;
            height: 50px;
            float: left;
            background-color: pink;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 30px;
        }
        #uli{
            width: 900px;
        }
        #uli li{
            width: 900px;
            height: 300px;
            background-color: aqua;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
        }
        #uli li:first-child{
            background-color: red;
        }
        #uli li:nth-child(2){
            background-color: yellow;
            display: none;
        }
        #uli li:last-child{
            background-color: blue;
            display: none;
        }
    </style>

<body>
    <div>
        <ul id="ull">
            <li style="background-color: gold;">标签1</li>
            <li>标签2</li>
            <li>标签3</li>
        </ul>
        <ul id="uli">
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ul>
    </div>
</body>

<script>
    var ul = document.getElementById('ull').getElementsByTagName('li')
    var ull = document.getElementById('uli').getElementsByTagName('li')
    for(var i=0;i<ul.length;i++){
        ul[i].onmouseover=function(){
            // console.log(this);
            for(var j=0;j<ul.length;j++){
                //判断点击的对象是否是当前对象
                if(ul[j]==this){
                    // console.log(1);
                    this.style.backgroundColor='gold'
                    ull[j].style.display = 'block'
                }else{
                    ul[j].style.backgroundColor=''
                    ull[j].style.display ='none'
                }
            }
        }
    }
</script>