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

至尊鸡

已于 2023-11-30 09:32:44 修改

阅读量6.5k

点赞数 10

分类专栏： JS 文章标签： css html javascript

于 2023-01-04 18:22:23 首次发布

本文链接：https://blog.csdn.net/m0_72190449/article/details/128552330

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

html代码

<body>
    <div class="box">
        <div class="daohan">
            <ul>
                <li>
                    <div>
                        <span class="menuSpan">首页</span>
                        <div class="box0">首页</div>
                    </div>
                   
                </li>
                
                <li>
                    <div class="collapsed">
                        <span class="menuSpan">1</span>
                        <div class="box1">1</div>
                    </div>
                    


                </li>
                
                <li>
                    <div class="collapsed">
                        <span class="menuSpan">2</span>
                        <div class="box2">2</div>
                    </div>
                   
                </li>
               
                <li>
                    <div class="collapsed">
                        <span class="menuSpan">3</span>
                        <div class="box3">3</div>
                    </div>
                    
                </li>
                
            </ul>
        </div>
    </div>
    
</body>

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，再为其全部绑定点击事件，要判断当前点击的导航栏是否隐藏，隐藏的话就取消隐藏，让他显示出来，再为其他不点击内容添加隐藏，让他们隐藏起来，在这里我已经封装好了添加，去除类等的函数，可以适用很多种情况

<script>
    window.onload=function(){
        var menuSpan=document.querySelectorAll(".menuSpan");
        var opendiv=menuSpan[0].parentNode
        for(var i=0;i<menuSpan.length;i++){
            menuSpan[i].onclick=function(){
            var presentDiv=this.parentNode;
            toggleClass(presentDiv,"collapsed")
                if(opendiv!=presentDiv&&!hasClass(opendiv,"collapsed")){
                toggleClass(opendiv,"collapsed")
            }
               opendiv=presentDiv;
        
            }

        }
        function getstyle(obj,name){
            if(window.getComputedStyle){
                return getComputedStyle(obj,null)[name]
            }else{
                return obj.currentStyle[name]
            }
        }
        function move(obj,attr,taget,speed,callback){
            clearInterval(obj.timer)
            var current=parseInt(getstyle(obj,attr))
            if(current>taget){
                speed=-speed
            }
            obj.timer=setInterval(function(){
                var old=parseInt(getstyle(obj,attr))
                var newv=old+speed
                
                if(speed>0&&newv>taget||newv<taget&&speed<0){
                newv=taget
            }
                obj.style[attr]=newv+"px" 
            /*  //或者写为
                box1.style.left= box1.offsetLeft+num+"px"
                if((box1.offsetLeft+num)>800){
                    box1.style.left=800+"px"

                }
                */
                if(newv==taget){
                    clearInterval(obj.timer);
                    callback();
                
                    
                }
                
            
                
            },10)

        }
        function addClass(obj,cn){
            if(!hasClass(obj,cn)){
                obj.className=obj.className+" "+cn
            }

        }

        /* 判断obj中有没有cn，利用正则 */
        function hasClass(obj,cn){
            
            //var reg=/\bb2\b/;
            /* \b单词边界 */
            /* 需要动态生成正则就用用到构造函数 
            寻找到cn
            */
            var reg=new RegExp("\\b"+cn+"\\b")
            return reg.test(obj.className) 

        }
        /* 删除元素指定样式 */
        function removeClass(obj,cn){
            /* 寻找到cn */
            var reg=new RegExp("\\b"+cn+"\\b")
            /* 替换成为空串 */
            obj.className=obj.className.replace(reg,"")


        }
        /* toggleClass可以切换一个类
        如果元素有就删除
        没有就添加
        */
        function toggleClass(obj,cn){
            if(hasClass(obj,cn)){
                removeClass(obj,cn);

            }else{
                addClass(obj,cn);    
            }
            //addClass(box,"b2")
            //removeClass(box,"b1")
        }
}
    
</script>