<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>娛樂圈的那點事，潛規(guī)則董习？</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++){
? ? ? ? ? ? ? ? //統(tǒng)一樣式
? ? ? ? ? ? ? ? navLi[j].firstElementChild.style.background='#000';
? ? ? ? ? ? ? ? boxLi[j].style.display='none';
? ? ? ? ? ? }?
? ? ? ? ? ? navLi[num].firstElementChild.style.background='#f00';?
? ? ? ? ? ? boxLi[num].style.display='block';?
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
