点击导航栏内容变

作者: 任仪凡 | 来源:发表于2018-08-08 14:51 被阅读0次

2020-06-06
Jetpack学习-6-Navigation
iOS个人中心透明导航栏简易实现
点击导航栏内容变
点击导航栏内容变
2018.8.7
使用jquery的load方法加载layui的模板资源404
uni-app学习笔记(1)
jQuery水平导航栏切换图片
阻止页面元素被选中

  <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>

效果：