选项卡切换 | 易学教程

制作一个选项卡切换

1、把选项卡的html页面框架搭建起来

html页面代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div>
            <!--居中的框架开始-->
            <div class="tab-jz">
                <!--选项卡开始-->
                <div class="tab-x" id="name">
                    <div class="tab-dj1">
                        <p>
                            <a href="#">选项1</a>
                        </p>
                    </div>
                    <div class="tab-dj2">
                        <p>
                            <a href="#">选项2</a>
                        </p>
                    </div>
                    <div class="tab-dj3 active">
                        <p>
                            <a href="#">选项3</a>
                        </p>
                    </div>
                    <div class="tab-dj4">
                        <p>
                            <a href="#">选项4</a>
                        </p>
                    </div>
                </div>
                <!--选项卡结束-->

                <!--显示的内容开始-->
                <div id="nr">

                    <div>
                        <p>显示的内容1</p>
                    </div>

                    <div>
                        <p>显示的内容2</p>
                    </div>

                    <div style="display: block;">
                        <p>显示的内容3</p>
                    </div>

                    <div>
                        <p>显示的内容4</p>
                    </div>

                </div>
                <!--显示的内容结束-->
            </div>
            <!--居中的框架结束-->
        </div>

        <link rel="stylesheet" href="css/tab.css" />
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="js/tab.js"></script>
    </body>

</html>

2、给html页面添加css样式

css页面代码

/*清除所有a标签的下划线以及添加黑色字体颜色*/

a {
    text-decoration: none;
    color: black;
}


/*居中的主体*/

.tab-jz {
    width: 50%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid silver;
}


/*选项卡的框架样式*/

.tab-x {
    width: 100%;
    height: 50px;
    display: flex;
}


/*把选项卡分成四份*/

.tab-dj1 {
    flex: 1;
    background-color: #C0C0C0;
    border-right: 1px solid #9D9D9D;
    border-bottom: 1px solid silver;
}

.tab-dj2 {
    flex: 1;
    background-color: #C0C0C0;
    border-right: 1px solid #9D9D9D;
    border-bottom: 1px solid silver;
}

.tab-dj3 {
    flex: 1;
    background-color: #C0C0C0;
    border-right: 1px solid #9D9D9D;
    border-bottom: 1px solid silver;
}

.tab-dj4 {
    flex: 1;
    background-color: #C0C0C0;
    border-bottom: 1px solid silver;
}


/*字体居中*/

p {
    text-align: center;
}


/*把所有内容隐藏*/

#nr div {
    display: none;
}


/*改变选项卡的背景色*/

.active {
    background-color: white;
}

3、编写js让选项卡随意切换

js页面代码

$(function() {
    //获取id为name下的所有div
    var xx = document.getElementById("name").getElementsByTagName("div");

    //获取id为nr下的所有div
    var nr = document.getElementById("nr").getElementsByTagName("div");

    //遍历xx下的所有div
    for(var i = 0; i < xx.length; i++) {

        //为xx下的每个div添加index属性
        xx[i].index = i;

        //当你点击第i个选项卡时执行
        xx[i].onclick = function() {

            //再次遍历xx下的所有div
            for(var i = 0; i < xx.length; i++) {

                //当点击选项卡后根据下标移除选项卡的active类名（把选项卡的背景色清除）
                xx[i].classList.remove("active");

                //当点击选项卡后根据下标把显示的内容，用内部样式方式隐藏
                nr[i].style.display = "none";

            }
            //当点击选项卡后为这个选项卡添加active类名（添加选项卡的背景色）
            this.classList.add("active");

            //当点击选项卡后把这个下标隐藏的内容，用内部样式方式显示
            nr[this.index].style.display = "block";

        }
    }

});

4、效果图

来源：https://www.cnblogs.com/hyhs/p/12178803.html

标签

选项卡