简单实现Tab菜单的切换功能

主要思路 

1. 页面准备三个盒子：导航栏/菜单、内容盒子、展示盒子

   获取导航标签和各个内容模块，根据被点击标签的索引直接获取对应的内容模块进行显示

2. 定义一个变量记录上一次被点击标签的索引，每次比较当前被点击标签的索引是否和上一次一致，不一致则更新变量并修改元素样式

实现代码

html代码

<!-- 导航菜单 -->
   <div class="nav">
        <ul>
            <li>
                <p>主页</p>
            </li>
            <li>
                <p>发现</p>
            </li>
            <li>
                <p>我的</p>
            </li>
        </ul>
    </div>
    <!-- 内容展示盒子 -->
    <div class="display_box">
        
    </div>
    <!-- 内容盒子 -->
    <div class="content_box">
        <div class="page">
            <p>这是主页内容</p>
            <div class="img_box">
                <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" width="400" height="200">
            </div>
        </div>
        <div class="found">
            <p>
                这是发现页面
            </p>
            <ul>
                <li>
                    yyds
                </li>
                <li>
                    awsl
                </li>
                <li>
                    xswl
                </li>
            </ul>
        </div>
        <div class="person">
            <p>
                这是我的页面
            </p>
            <input type="text" placeholder="测试">
            <button>确定</button>
        </div>
    </div>

 css代码

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        .nav{
            margin-top: 3rem;
        }
        .nav ul{
            width: 100%;
            display: flex;
            gap: 2rem;
            justify-content: center;
        }
        .content_box{
            display: none;
        }
        .display_box{
            margin: 1rem auto;
            width: 40rem;
            height: 20rem;
            background-color: lightblue;
            text-align: center;
        }
        .img_box{
            margin-top: 2rem;
        }

js代码

        // 获取导航菜单的全部标签（返回的是NodeList，每个元素是object类型）
        let options = document.querySelectorAll(".nav ul li p");
        // 获取全部待展示的内容模块(注意这里需要用“>”，否则获取的是所有的子孙div)
        let contents = document.querySelectorAll(".content_box > div");
        // 定义变量记录当前标签，默认为主页，索引为0
        let mark = 0;
        options.item(mark).style.cssText = "border-bottom: 2px solid orange";
        // 初始化展示盒子，将主页内容复制到展示盒子中
        document.getElementsByClassName("display_box")[0].innerHTML = contents.item(0).innerHTML;
        // 为标签添加监听，根据索引展示对应的内容模块
        // 这里的标签和内容模块是一一对应的
        options.forEach((element, index)=>{
            element.onclick = function(){
                if(index!==mark){
                    options.item(mark).style.cssText = "border-bottom: none";
                    element.style.cssText = "border-bottom: 2px solid orange";
                    mark = index;
                }
                // item()方法用于通过索引获取NodeList中的元素
                document.getElementsByClassName("display_box")[0].innerHTML = contents.item(index).innerHTML;
            }
        })

效果展示