【JavaScript】选项卡切换_js选项卡页面切换-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_75260099/article/details/144237486

选项卡切换

选项卡切换是一种常见的网页设计模式，用于在一个页面内显示和切换不同内容区域，而无需加载页面。用户可以通过点击选项卡切换显示不同的内容，而隐藏其他内容。

多选项显示：页面顶部、侧边或其他地方通常有多个选项卡标题，供用户选择。

内容分区切换：每个选项卡对应一个内容区域，点击某个选项卡会显示对应内容，隐藏其他内容。

样式变化：被选中的选项卡会有特殊的样式（如背景颜色、字体加粗等），以区分选中状态和未选中状态。

选项卡切换的组成

标题区域和内容区域

标题区域

通常以按钮或列表形式排列，每个选项卡代表一个内容分区。

内容分区

每个选项卡对应的内容部分，默认只显示当前选中的内容，其他内容隐藏。

选项卡切换工作流程

初始状态：默认显示第一个选项卡及其对应的内容。

用户操作：用户点击选项卡标题，触发切换操作。

响应切换：

改变选项卡样式，突出显示当前选中的选项卡。
显示对应的内容分区，隐藏其他分区内容。

选项卡的简单实现

实现思路

点击任意li：
1. 当前点击的按钮加上“current”样式。
2. 其他按钮样式清空。
对应的内容使用div显示，其他内容隐藏。
隐藏的内容区域被赋予一个随机背景颜色。

实现步骤

1、获取想要获得的html元素

querySelectorAll选择所有.btns下的li元素，以及.content下的div元素。

console.log(li_list)输出按钮列表，方便调试。

var li_list = document.querySelectorAll(".btns li")
var div_list = document.querySelectorAll(".content div")
console.log(li_list)

2、循环绑定index属性

for(var i = 0;i<li_list.length;i++){
    // 给每个标题按钮绑定index属性
    li_list[i].setAttribute("index",i)
    ......
}

遍历每个li，设置一个自定义属性index，表示在列表中的索引。

3、绑定点击事件

点击摸个按钮后，将其className设置为“current”，表示选中状态；其他按钮的className清空，即移除样式。

li_list[i].onclick = function(){
    //样式切换
    for(var j = 0;j<li_list.length;j++){
        li_list[j].className=""
    }
    this.className = "current"
}

4、内容切换

使用getAttribute方法获取当前点击按钮的index值

遍历所有内容区域，如果索引k和按钮的index一致，显示内容区域；如果不一致，隐藏内容区域。

var num = this.getAttribute("index")
for(var k = 0;k<div_list.length;k++){
    if(k==num){
        //元素显示
        div_list[k].style.display = "block"
    }else{
        div_list[k].style.display = "none"
    }
}

5、为隐藏的内容生成随机背景（选做，加着玩的）

为每个隐藏的内容区域：

使用 Math.random() 和 Math.round() 生成一个6位的随机数，表示十六进制颜色代码。

将这个随机颜色赋值给div_list[k].style.background。

var bg = "";
for (var i = 0; i < 6; i++) {
    bg = bg + Math.round(Math.random() * 9);
}
div_list[k].style.background = "#" + bg;

6、完整代码

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>table切换</title>
    <script src="table.js" defer></script>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .container{
            width: 100%;
            height: 400px;
            /* background:yellow; */
            margin: 100px auto;        
            
        }
        .container .btns{
            display: flex;
            width: 80%;
            justify-items: center;
            margin: auto;
        }
        .container .btns li{
            width: 40%;
            list-style-type: none;
            border:1px solid plum;
            border-bottom: 0px;
            padding: 5px 7px;
            
            margin-right: 4px;
            cursor:pointer;
            border-radius: 4px;
            display: flex;
            justify-content: center;

        }
        .container .btns li.current{
            background:plum;
            color:#ffff;
            display: flex;
            justify-content: center ;
        }
        .container .content{
            border:2px  solid plum;
            height: 300px;
            border-radius: 0px 40px 0px 40px;
        }
        .container .content div{
            height: 100%;
            /* 隐藏元素 */
            display: none;
            color: aliceblue;
        }
        .container .content div:nth-child(1){
            display: block;
        }
        </style>
</head>
<body>
    <div class="container">
        <ul class="btns">
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">机构简介</a></li>
            <li><a href="#">招生工作</a></li>
            <li><a href="#">培养工作</a></li>
            <li><a href="#">学位管理</a></li>
            <li><a href="#">学位点建设</a></li>
            <li><a href="#">专业学位</a></li>
            <li><a href="#">导师管理</a></li>
            <li><a href="#">学生工作</a></li>
            <li><a href="#">文件汇编</a></li>
            <li><a href="#">下载专区</a></li>
        </ul>
        <div class="content">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
            <div>内容4</div>
            <div>内容5</div>
            <div>内容6</div>
            <div>内容7</div>
            <div>内容8</div>
            <div>内容9</div>
            <div>内容10</div>
            <div>内容22</div>
            <div>内容33</div>
        </div>
    </div>
</body>
</html>

js：

var li_list = document.querySelectorAll(".btns li")
var div_list = document.querySelectorAll(".content div")
console.log(li_list)

for(var i = 0;i<li_list.length;i++){
    // 给每个标题按钮绑定index属性
    li_list[i].setAttribute("index",i)

    li_list[i].onclick = function(){
        //样式切换
        for(var j = 0;j<li_list.length;j++){
            li_list[j].className=""
        }
        this.className = "current"

        // 内容切换
        var num = this.getAttribute("index")
        for(var k = 0;k<div_list.length;k++){
            if(k==num){
                //元素显示
                div_list[k].style.display = "block"
            }else{
                div_list[k].style.display = "none"
                var bg = ""
                for(var i=0;i<6;i++){
                    bg = bg +Math.round(Math.random()*9)
                }
                div_list[k].style.background = "#"+bg;
            }
        }
    }
}