其实方法有很多，这里只演示其中一种：

可复制到【HTML/CSS/JS 在线工具】中演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .btn{
            margin: 20px 120px;
            width: 80px;        
        }
        .content{
            margin: 10px auto;
            display: none;
        }
        .btn.active{
            background-color: pink;
        }
        .content.show{
            display:block;
            
        }
    </style>
</head>
<body>
    <p class="btn1">
        <button class="btn active">页面一</button>

        <button class="btn">页面二</button>
    
        <button class="btn">页面三</button>
    </p>

    <div class="content show">
         <p>页面一要显示的内容</p>
         <input type="text" placeholder="页面一内容"/>
    </div>
    <div class="content">
          <p>页面二要显示的内容</p>
          <input type="text" placeholder="页面二内容" />
    </div>

    <div class="content" >
          <p>页面三要显示的内容</p>
          <input type="text" placeholder="页面三内容"/>
    </div>

    <script>
        //获取页面的每个按钮
        var btns = document.getElementsByClassName("btn")
        //获取内容盒子
        var contents = document.getElementsByClassName("content")

        //遍历每个按钮为其添加点击事件
        for(var i=0;i<btns.length;i++){
            btns[i].index = i;
            btns[i].onclick = function(){
                //对当前点击的按钮赋予active类名及显示当前按钮对应的内容
                for(var j=0;j<btns.length;j++){
                    btns[j].className = btns[j].className.replace(' active', '').trim();
                    contents[j].className = contents[j].className.replace(' show', '').trim();
                }
                this.className = this.className + ' active';
                contents[this.index].className = contents[this.index].className + ' show';
            };

        }


    </script>
</body>
</html>

注意，实际运用过程中，如果JavaScript代码采用外部引入的方式，那么引入文件如果放在页面开头<head>中，JS代码可能失效。可以尝试放在</body>结束标签后、</html>结束标签前。

参考内容：

[1] https://www.cnblogs.com/lyxzxp/p/10881807.html