Js制作简单的选项卡

最新推荐文章于 2022-11-13 20:35:01 发布

KKXXZX

最新推荐文章于 2022-11-13 20:35:01 发布

阅读量321

点赞数

分类专栏： JavaScript学习笔记文章标签：选项卡

本文链接：https://blog.csdn.net/zx6571269/article/details/78398480

版权

JavaScript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

选项卡的简单制作

1. classList.add(“”) 添加额外的类,来设置当tab1被选中时，背景变为灰色，tab2移除背景颜色
2. classLsit.remove(“”) 移除添加的额外的类，当tab2被选中是，tab2背景颜色设置为灰色，tab1移除背景颜色
3. 通过设置style.display = “block”来设置内容的显示
4. 通过设置style.display = “none”来设置内容的隐藏
5. 通过onmouseover设置，当鼠标移动到tab1时，stage1显示,stage2设置隐藏，当鼠标移动到tab2时，stage2显示，stage1隐藏。

<head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            onload=function(){
                var tab1 = document.querySelector(".tab1");
                var tab2 = document.querySelector(".tab2");
                var stage1 = document.querySelector(".stage1"); 
                var stage2 = document.querySelector(".stage2");

                tab1.onmouseover=function(){
                //tab1.style.color="#FF0000";
                    //stage1设置为显示
                    stage1.style.display="block";
                    //stage2设置为隐藏
                    stage2.style.display="none";
                    //额外添加一个类,tab1添加背景颜色
                    tab1.classList.add("selected");
                    //移除一个类，tab2移除背景颜色
                    tab2.classList.remove("selected")
                }
                tab2.onmouseover=function(){

                    stage2.style.display="block";
                    stage1.style.display="none";

                    tab2.classList.add("selected");
                    tab1.classList.remove("selected")
                }
            }

        </script>
        <style>
            //设置tab的背景颜色
            .selected{
                background-color: #808080;
            }
            span,div{
                border: 1px solid #808080;
            }
            .stage1{
                background-color: red;
            }
            //默认为不显示
            .stage2{

                background-color: blue;
                display: none;

            }
            div{

                height: 160px;
                width: 300px;
            }


        </style>
    </head>
    <body>
        <span class="tab1">选项卡1</span>
        <span class="tab2">选项卡2</span>
        <div class="stage2">我是内容二</div>
        <div class="stage1">我是内容一</div>
    </body>

KKXXZX

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js制作简单的选项卡

选项卡的简单制作 1. classList.add(“”) 添加额外的类,来设置当tab1被选中时，背景变为灰色，tab2移除背景颜色 2. classLsit.remove(“”) 移除添加的额外的类，当tab2被选中是，tab2背景颜色设置为灰色，tab1移除背景颜色 3. 通过设置style.display = “block”来设置内容的显示 4. 通过设置style.display
复制链接

扫一扫