javascript - 帮写一个选项卡，谢谢

Question

ps：当点击连衣裙区就会跳到连衣裙页面，服装区就是服装页面。全部时就是全部页面，新手不太会写。

<style>
.alltype{
 width:100%;
 margin-top:2%;
}
.left{
  width:30%;
  height:100%;
  float:left;
}
.left li{
  line-height:40px;
  font-size:18px;
  padding-left:15%;
}
.right{
  width:65%;
  float:right;
  margin-right:2.5%;
  border-left:1px solid #CCCCCC;
}
.right img{
 border-radius: 5px;
 width: 95%;
 margin-left: 5%;
}
.right li{
   float: left;
   margin-left: 5%;
   width: 27%;
   height: 65px;
   margin-top: 5%;
}
</style>
<p class="alltype">
   <p class="left">
     <li>连衣裙</li>
     <li>服装区</li>
     <li>全部</li>
   </p>

   <!--裙子区-->
   <p class="right">
     <img src="images/type/snowlist.jpg">
     <p style="text-align:center; padding-top:10%;"> . 连衣裙.</p>
     <li><img src="images/type/p01.jpg"></li>
     <li><img src="images/type/p02.jpg"></li>
     <li><img src="images/type/p03.jpg"></li>

     <li><img src="images/type/p04.jpg"></li>
     <li><img src="images/type/p05.jpg"></li>
     <li><img src="images/type/p06.jpg"></li>

     <li><img src="images/type/p01.jpg"></li>
   </p>





    <!--服装区-->
    <p class="right">
         <img src="images/type/toplist.jpg">
         <p style="text-align:center; padding-top:10%;"> .棉衣.</p>
         <li><img src="images/type/p01.jpg"></li>
         <li><img src="images/type/p02.jpg"></li>
         <li><img src="images/type/p03.jpg"></li>
       </p>   


         <!--全部-->
            <p class="right">
                 <img src="images/type/alllist.jpg">
                 <p style="text-align:center; padding-top:10%;"> . 全部产品.</p>
                 <li><img src="images/type/p01.jpg"></li>
                 <li><img src="images/type/p02.jpg"></li>
                 <li><img src="images/type/p03.jpg"></li>
               </p>
</p>
</body>
</html>

Answer 1

首先，你给.right加一个display:none；属性，然后

window.onload=function(){
                var bar=document.getElementsByClassName("left")[0];
                var bar_list=bar.children;
                var nav=document.getElementsByClassName("right");
                for (var i=0,len=bar_list.length;i<len;i++) {
                    (function(i){
                        bar_list[i].onclick=function(){
                            for (var a=0;a<len;a++) {
                                nav[a].style.display="none";
                            }
                            nav[i].style.display="block";
                        }
                    })(i)
                }
            }

Answer 2

自己的事情自己做哦