设计一个选项卡功能，当鼠标移动至某一选项卡时出现切换。

最新推荐文章于 2023-05-16 21:08:03 发布
十一个月
最新推荐文章于 2023-05-16 21:08:03 发布
阅读量1k
点赞数
文章标签： html
本文链接：https://blog.youkuaiyun.com/kkmmtb/article/details/123716697
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>picture</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .all {
            width: 500px;
            height: 270px;
            background-color: rgb(246 246 246);
            margin: 100px auto;
            padding: 50px 0;
        }

        .all .title {
            width: 460px;
            height: 30px;
            background-color: #000;
            color: #fff;
            overflow: hidden;
            margin: 50px auto 0;
        }

        .all .title span {
            display: inline-block;
            height: 30px;
            padding: 0 43px;
            line-height: 30px;
        }

        .all ul {
            width: 460px;
            height: 168px;
            list-style: none;
            background-color: white;
            margin: 0 auto;
        }

        .all ul li {
            text-indent: 15px;
            line-height: 40px;
            border-bottom: 2px grey dotted;
        }

        .all .div_2,.div_3{
            display: none;
        }
    
    </style>
    <script>
        window.onload = function () {
            var mySpan = document.getElementsByTagName('span');
            var div_1 = document.getElementById('div_1');
            var div_2 = document.getElementById('div_2');
            var div_3 = document.getElementById('div_3');

            for (let i = 0; i < mySpan.length; i++) {
                div_2.style.display = 'none';
                mySpan[i].onmouseenter = function () {

                    if (mySpan[i].className == 'list_1') {
                        mySpan[i].style.backgroundColor = '#aaa';
                        for (let j = 0; j < mySpan.length; j++) {
                            if (mySpan[j] == mySpan[i]) {

                                div_1.style.display = 'block';
                                div_2.style.display = 'none';
                                div_3.style.display = 'none';
                            }

                        }
                    }
                    else if (mySpan[i].className == 'list_2') {
                        mySpan[i].style.backgroundColor = '#aaa';
                        for (let j = 0; j < mySpan.length; j++) {
                            if (mySpan[j] == mySpan[i]) {

                                div_1.style.display = 'none';
                                div_2.style.display = 'block';
                                div_3.style.display = 'none';
                            }

                        }


                    }
                    else if (mySpan[i].className == 'list_3') {
                        mySpan[i].style.backgroundColor = '#aaa';
                        for (let j = 0; j < mySpan.length; j++) {
                            if (mySpan[j] == mySpan[i]) {

                                div_1.style.display = 'none';
                                div_2.style.display = 'none';
                                div_3.style.display = 'block';
                            }

                        }


                    }

                }
                mySpan[i].onmouseout = function () {
                    // mySpan[i].style.backgroundColor = 'black';
                    for (let j = 0; j < mySpan.length; j++) {
                            if (mySpan[j] != mySpan[i]) {
                                //alert('hello');
                                mySpan[i].style.backgroundColor = '#000';
                            }

                        }
                }

            }
        };
    </script>
</head>

<body>
    <div class="all">
        <div class="inner">
            <div class="title">
                <span class="list_1">热门排行</span>
                <span class="list_2">美图速递</span>
                <span class="list_3">前沿科技</span>
            </div>
            <div class="hot" id="div_1">
                <ul>
                    <li>asdasdsadasdasdasdas</li>
                    <li>asdasdsadasdasdasdas</li>
                    <li>asdasdsadasdasdasdas</li>
                    <li>asdasdsadasdasdasdas</li>
                </ul>
            </div>
            <div class="change" id="div_2">
                <ul>
                    <li>ghjrtyuicvbnmyuidfghjdfghj</li>
                    <li>ghjrtyuicvbnmyuidfghjdfghj</li>
                    <li>ghjrtyuicvbnmyuidfghjdfghj</li>
                    <li>ghjrtyuicvbnmyuidfghjdfghj</li>
                </ul>
            </div>
            <div class="tech" id="div_3"></div>
        </div>
    </div>
</body>

</html>