點(diǎn)擊導(dǎo)航欄，導(dǎo)航欄和下面的副欄變色變內(nèi)容

效果圖.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出現(xiàn)bug，會(huì)影響上面的dom元素和文本內(nèi)容的渲染（資源文件的加載） -->
<script>
    //點(diǎn)擊的span 顯示對(duì)應(yīng)的li
    //1、獲取元素 2、注冊(cè)點(diǎn)擊事件 3、添加事件處理函數(shù)
    //獲取你用到的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、注冊(cè)點(diǎn)擊事件 for
    for(var i=0;i<spans.length;i++){
        //此時(shí)的i 存起來
        //spans[i].setAttribute('index',i);//方法一：setAttribute('自定義屬性名字',值)
        spans[i].index=i;//方法二
        //todo1【hd部分】讓當(dāng)前的span變成orange 其他所有span變pink
        
        //i 很快執(zhí)行完了 4
        //spans[4] 沒有這個(gè)對(duì)象
        //for完成綁定 沒有完成出發(fā) 此時(shí)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';  //報(bào)錯(cuò) 因?yàn)閕=4            
         this.style.background='orange'
        
        //todo2【bd部分】讓當(dāng)前點(diǎn)擊的span對(duì)應(yīng)的li顯示 下標(biāo)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
    //當(dāng)對(duì)象被定義未被賦值，便是undefined
</script>`