JS基础选项卡

最新推荐文章于 2024-03-14 16:53:37 发布

挺菜的.

最新推荐文章于 2024-03-14 16:53:37 发布

阅读量558

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_55179512/article/details/124385095

版权

选项卡在网页中很常见，应用的也很广泛，还是考验我们对JavaScript的掌握和运用，接下来让我们看一下最基础的选项卡代码，代码里注释对每一步都有详细的讲解，跟着代码逻辑一点点进行下去就能掌握

<!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>tab选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        ul li{
            width: 100px;
            height: 50px;
            background-color: #ccc;
            float: left;
            border: 1px solid black;
            text-align: center;
            line-height: 50px;
        }
        #box{
            position: absolute;
            top: 50px;
        }
        #box div{
            width: 406px;
            height: 200px;
            border: 1px solid black;
            display: none;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <ul>
        <li>大橘</li>
        <li>英短</li>
        <li>美短</li>
        <li>布偶</li>
    </ul>
    <div id="box">
        <div class="bg" style="display: block;">1</div>
        <div class="bg">2</div>
        <div class="bg">3</div>
        <div class="bg">4</div>
    </div>

    <script>
        // 逻辑 ：1、移动到哪个选项卡，哪个选项卡背景色就改变
        //        2、对应的内容区域就显示，同样，移出时，背景颜色恢复，对应的内容区域隐藏
        var lis = document.getElementsByTagName("li");
        var bgs = document.getElementsByClassName("bg");

        for(let i = 0 ; i < lis.length ; i++){

            // 进行元素数组下标的设置,这一步是必须的!
            lis[i].index = i;

            // 鼠标移入时对应的背景颜色就改变
                    //同时，选项卡通过下标对应的图片就随之显示
            lis[i].onmouseover = function(){
                // console.log(this.index);
                lis[i].style.backgroundColor = 'yellow';
                bgs[this.index].style.display = 'block';
            }
            
            // 鼠标移出时对应的背景颜色就恢复
                    同时，选项卡通过下标对应的图片就随之隐藏
            lis[i].onmouseout = function(){
                lis[i].style.backgroundColor='#ccc';
                bgs[this.index].style.display = 'none';
            }
        }
    </script>
</body>
</html>

挺菜的.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础选项卡

选项卡在网页中很常见，应用的也很广泛，还是考验我们对JavaScript的掌握和运用，接下来让我们看一下最基础的选项卡代码，代码里注释对每一步都有详细的讲解，跟着代码逻辑一点点进行下去就能掌握<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge...
复制链接

扫一扫