美文网首页
点击导航栏内容变

点击导航栏内容变

作者: 哇塞薛之谦 | 来源:发表于2018-08-12 16:41 被阅读0次

    <style>

          *{

            margin:0;

                padding:0;

            }

            li{

                list-style:none;

            }

            a{

                text-decoration: none;

            }

            .container{

                width:600px;

                margin:100px auto;

            }

            .nav{

                height:40px;

                line-height: 40px;

                overflow: hidden;

            }

            .nav li{

                float:left;

            }

            .nav li a{

                display:inline-block;

                width:150px;

                height:40px;

                text-align: center;

                color:#fff;

                background: #000;

            }

            .nav li:first-child a{

                background: #f00;

            }

           

            /*box*/

            .box{

                position: relative;

            }

            .box li{

                width:600px;

                height:300px;

                line-height: 300px;

                text-align: center;

                position: absolute;

                background: #eee;

                display: none;

            }

            .box li:first-child{

                display: block;

            }

        </style>

    </head>

    <body>

        <div class='container'>

          <!--导航-->

          <ul class='nav'>

              <li><a href="#">新闻</a></li>

              <li><a href="#">娱乐</a></li>

              <li><a href="#">综艺</a></li>

              <li><a href="#">军事</a></li>

          </ul>

          <ul class='box'>

              <li>还在打王者LOL呢?国家大事你关心了么?</li>

              <li>元芳薛之谦事件你怎么看?</li>

              <li>娱乐圈的那点事,潜规则?</li>

              <li>淘宝双十一你们是不是又要剁手了?</li>

          </ul>

        </div>

       

        <script>

          //找到nav中的li

            var navLi=document.querySelectorAll('.nav li');

          //找到box中的li

            var boxLi=document.querySelectorAll('.box li');

          //遍历navLi

            for(var i=0;i<navLi.length;i++){

                navLi[i].index=i;

                navLi[i].onclick=function(){

                    //获取当前的索引值

                  var num=this.index;

                for(var j=0;j<navLi.length;j++){

                    //统一样式

                    navLi[j].firstElementChild.style.background='#000';

                    boxLi[j].style.display='none';

                } 

                navLi[num].firstElementChild.style.background='#f00'; 

                boxLi[num].style.display='block'; 

                }

            }

        </script>

    相关文章

      网友评论

          本文标题:点击导航栏内容变

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