美文网首页
简单导航栏

简单导航栏

作者: msqt | 来源:发表于2019-02-07 22:26 被阅读0次

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    </head>
    <style>
    .navigation{
    position: relative;
    left:0;
    top:0;
    width:100px;
    height:600px;
    border:1px solid #000;
    }
    .navigation .title{
    float:left;
    width:100%;
    /height:150px;/
    height: 30px;
    border-bottom:1px solid #000;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    cursor: pointer;
    background: #f1f1f1;
    transition:height 0.5s;
    }
    .navigation .title span{
    float:left;
    width:100%;
    height:30px;
    border-bottom:1px solid #000;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    }
    .navigation .title .chile-child{
    float:left;
    width:100%;
    height:30px;
    text-align: center;
    font-size: 15px;
    line-height: 30px;
    }
    .active{
    background: #4CAF50;
    }
    </style>
    <body>
    <div class="navigation">
    <div class="title">
    <span class="active">首页</span>
    </div>
    <div class="title">
    <span>视频</span>
    <div class="chile-child">喜剧</div>
    <div class="chile-child">恐怖悬疑</div>
    <div class="chile-child">功夫</div>
    <div class="chile-child">科幻</div>
    </div>
    <div class="title">
    <span>音乐</span>
    <div class="chile-child">流行</div>
    <div class="chile-child">摇滚</div>
    <div class="chile-child">电子</div>
    <div class="chile-child">轻音乐</div>
    </div>
    <div class="title">
    <span>小说</span>
    <div class="chile-child">恐怖</div>
    <div class="chile-child">玄幻</div>
    <div class="chile-child">言情</div>
    <div class="chile-child">都市</div>
    </div>
    </div>
    </body>
    <script>
    let titles=document.querySelectorAll(".title span");
    let links=document.querySelectorAll(".chile-child");
    let boxs=[];
    for(let i=0;i<titles.length;i++){
    let obj={
    'is_choose':false
    }
    boxs.push(obj);
    }
    for(let i=0;i<titles.length;i++){
    titles[i].addEventListener("click",function(){
    for(let j=0;j<titles.length;j++){
    if(j===i){
    titles[j].setAttribute('class','active');
    }else{
    titles[j].setAttribute('class','')
    }
    }
    if(!boxs[i].is_choose){
    this.parentNode.style.height=150+'px';
    }else{
    this.parentNode.style.height=30+'px';
    }
    boxs[i].is_choose=!boxs[i].is_choose;
    })
    }
    for(let i=0;i<links.length;i++){
    links[i].addEventListener('click',function(){
    console.log(this);
    })
    }
    </script>
    </html>

    image.png

    相关文章

      网友评论

          本文标题:简单导航栏

          本文链接:https://www.haomeiwen.com/subject/llagsqtx.html