2020-06-06

点击导航栏，导航栏和下面的副栏变色变内容

效果图.png
效果图2.png

css部分

`<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    .tab{
        width: 400px;
        height: 300px;
        border: 1px solid #000;
    }
    /* 头部 */
    .tab .hd{
        height: 45px;
    }
    .tab .hd>span{
        display: inline-block;
        width: 45px;
        line-height: 45px;
        padding: 0px 15px;
        margin: 0px 10px 0px 0px;
        color: #fff;
        font-size: 16px;
        background:pink;
        cursor: pointer;
    }
    .tab .hd>span.cur{
        background: orange;
    }
    /* 身部 */
    .tab .bd{
        height: 255px;
        background: orange;
    }
    .tab .bd>ul{
        padding: 10px;
    }
    .tab .bd>ul>li{
        color: #fff;
        font-size: 14px;
        line-height: 24px;
        display: none;
    }
    .tab .bd>ul>li.cur{
        display: block;
    }
</style>`

html部分

`<div id="tab" class="tab">
    <!-- 头部 -->
    <div class="hd">
        <span class="cur">新闻</span>
        <span>体育</span>
        <span>娱乐</span>
        <span>军事</span>
    </div>
    <!-- 身部 -->
    <div class="bd">
        <ul>
            <li class="cur">新闻板块</li>
            <li>体育板块</li>
            <li>娱乐板块</li>
            <li>军事板块</li>
        </ul>
    </div>
</div>`

js部分

`<!-- js写哪都行，但为了浏览器的可读性（先加载样式），所以js通常写后面-->
<!-- 如果js写上面，一旦js出现bug，会影响上面的dom元素和文本内容的渲染（资源文件的加载） -->
<script>
    //点击的span 显示对应的li
    //1、获取元素 2、注册点击事件 3、添加事件处理函数
    //获取你用到的span li

    //1、原生获取元素
    var tab=document.getElementById('tab');//docuemnt. 是全文档搜索【耗性能】
    var hd=tab.getElementsByTagName('div')[0];
    var spans=hd.getElementsByTagName('span');
    var bd=tab.getElementsByTagName('div')[1];
    var lis=bd.getElementsByTagName('li');
    //2、注册点击事件 for
    for(var i=0;i<spans.length;i++){
        //此时的i 存起来
        //spans[i].setAttribute('index',i);//方法一：setAttribute('自定义属性名字',值)
        spans[i].index=i;//方法二
        //todo1【hd部分】让当前的span变成orange 其他所有span变pink
        
        //i 很快执行完了 4
        //spans[4] 没有这个对象
        //for完成绑定 没有完成出发 此时i=4
        spans[i].onclick=function(){
         //排他思想，让其他所有span都变成pink
         for(var i=0;i<spans.length;i++){
            spans[i].style.background='pink';
        }
        //spans[i].style.background='orange';  //报错 因为i=4            
         this.style.background='orange'
        
        //todo2【bd部分】让当前点击的span对应的li显示 下标index
        //先排他
        for(i=0;i<lis.length;i++){
            lis[i].style.display='none';
        }
        //获取index  用上面存起来的i
        //lis[this.getAttribute('index')].style.display='block'; //方法一：getAttribute('自定义的名字')
        lis[this.index].style.display='block';//方法二
      }  
    }

    var num;
    var obj={};
    console.log(obj.name)//undefined
    console.log(obj.num)//undefined
    //当对象被定义未被赋值，便是undefined
</script>`