导航栏切换内容，点击切换到对应的内容，html，css，js实现

点击导航栏即可切换内容（效果展示）

 html代码

    

        

            

                

                    

                        首页
                        
首页
                    
                   
                
                
                

                    

                        1
                        
1
                    
                    


                
                
                

                    

                        2
                        
2
                    
                   
                
               
                

                    

                        3
                        
3
                    
                    
                
                
            
        
    
    

css代码 样式随便弄弄，关键是collapsed，作用是用来显示和隐藏内容的，每次点击就为点击内容取消collapsed类，其他不显示就添加上collapsed类

*{
        padding: 0;
        margin: 0;
    }
    .daohan{
        position: relative;
        width: 100%;
        background-color: #fff;
        display: flex;
    }
    li{
        width: 125px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        list-style: none;
        display: block;
        float: left;
        background-color: blue;

    }
    .box{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        background-color: aqua;
    }
    .box0,.box1,.box2,.box3{
        position: absolute;
        top: 50px;
        width: 500px;
        height: 450px;
        left: 0;
    }
    .box0{
        background-color: coral;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: blueviolet;
    }
    .box3{
        background-color: chartreuse;
        
    }
    .collapsed{
        overflow: hidden;
        position: relative;
    }

js代码 主要实现过程简单说一下，先获取导航栏的menuSpan，再为其全部绑定点击事件，要判断当前点击的导航栏是否隐藏，隐藏的话就取消隐藏，让他显示出来，再为其他不点击内容添加隐藏，让他们隐藏起来，在这里我已经封装好了添加，去除类等的函数，可以适用很多种情况