JavaScript进阶篇-编程挑战

超、凢脫俗 2022-06-11 08:28 239阅读 0赞

## 编程挑战 ##

现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。

效果图:

![53bd0e9e000163d203390200.jpg][]

文字素材:

房产：

275万购昌平邻铁三居 总价20万买一居  
    200万内购五环三居 140万安家东三环  
    北京首现零首付楼盘 53万购东5环50平  
    京楼盘直降5000 中信府 公园楼王现房

家居:

40平出租屋大改造 美少女的混搭小窝  
     经典清新简欧爱家 90平老房焕发新生  
     新中式的酷色温情 66平撞色活泼家居  
     瓷砖就像选好老婆 卫生间烟道的设计

二手房：

通州豪华3居260万 二环稀缺2居250w甩  
     西3环通透2居290万 130万2居限量抢购  
     黄城根小学学区仅260万 121平70万抛!  
     独家别墅280万 苏州桥2居优惠价248万

### 任务 ###

大家先思考和分析实现思路，然后在动手实现

一、HTML页面布局

提示:
    选项卡标题使用ul..li
    选项卡内容使用div

二、CSS样式制作

提示:
    整个选项卡的样式设置
    选项卡标题的样式设置
    选项卡内容的样式设置
    一开始只显示一个选项卡内容，其它选项卡内容隐藏。

三、JS实现选项卡切换

提示:
    获取选项卡标题和选项卡内容
    选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配
    通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。

<!DOCTYPE html>
     <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>实践题 - 选项卡</title>
          <style type="text/css">
              *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
              #tabs {width:290px;padding:5px;height:150px;margin:20px;}
             #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
             #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}
             #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
             #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}
             .hide{display: none;}
         </style>
         <script type="text/javascript">
             window.onload = function(){
                  var Tab = document.getElementById("tabs");
                  var Ul  = Tab.getElementsByTagName("ul")[0];
                  var Lis = Ul.getElementsByTagName("li");
                  var Divs = Tab.getElementsByTagName("div");
     
                  for(var i= 0,len = Lis.length;i<len;i++){
                      Lis[i].index = i;
                      Lis[i].onclick = function() {
                          for(var n= 0;n<len;n++){
                              Lis[n].className = "";
                              Divs[n].className = "hide";
                          }
                          this.className = "on";
                          Divs[this.index].className = "";
                      }
                  };
              }
         </script>
     
     </head>
     <body>
     <div id="tabs">
         <ul>
             <li class="on">房产</li>
             <li>家居</li>
             <li>二手房</li>
         </ul>
         <div>
             275万购昌平邻铁三居 总价20万买一居<br>
             200万内购五环三居 140万安家东三环<br>
             北京首现零首付楼盘 53万购东5环50平<br>
             京楼盘直降5000 中信府 公园楼王现房<br>
         </div>
         <div class="hide">
             40平出租屋大改造 美少女的混搭小窝<br>
             经典清新简欧爱家 90平老房焕发新生<br>
             新中式的酷色温情 66平撞色活泼家居<br>
             瓷砖就像选好老婆 卫生间烟道的设计<br>
     
         </div>
         <div class="hide">
             通州豪华3居260万 二环稀缺2居250w甩<br>
             西3环通透2居290万 130万2居限量抢购<br>
             黄城根小学学区仅260万 121平70万抛!<br>
             独家别墅280万 苏州桥2居优惠价248万<br>
    
         </div>
     </div>
     
     </body>
     </html>

思路：

for
         
          (
         
          var 
         
          i=0,len=oLis.length;i<len;i++){ 
         
          //通过循环为所有的LI绑定点击事件
        
         
        
         
         
                      
         
          oLis[i].index=i;
         
          //添加index属性，方便后期找到当前点击LI对应的DIV，为其去除hide样式，即将其className赋值为空
        
         
        
         
         
                      
         
          oLis[i].onclick=
         
          function
         
          (){ 
         
          //循换绑定点击事件
        
         
        
         
         
                          
         
          for
         
          (
         
          var 
         
          n=0;n<len;n++){ 
         
          //通过循环将所有的li的className赋值为空，即所有的LI皆是未点击的样式，所有的DIV的className为hide样式，即所有DIV都隐藏
        
         
        
         
         
                              
         
          oLis[n].className=
         
          ""
         
          ;
        
         
        
         
         
                              
         
          oDivs[n].className=
         
          "hide"
         
          ;
        
         
        
         
         
                          
         
          }
        
         
        
         
         
                      
         
          this
         
          .className=
         
          "on"
         
          ;   
         
          //通过this获取到当前点击的LI，将其className赋值为on，即让当前点击的LI显示其应有的点击样式
        
         
        
         
         
                     
         
          oDivs[
         
          this
         
          .index].className=
         
          ""
         
          ; 
         
          //通过循环体内第一条语句存储的index值，找到当前点击LI对应的DIV，去除原有的hide样式，让其显示
        
         
        
         
         
                      
         
          }
        
         
        
         
         
                  
         
          };

[53bd0e9e000163d203390200.jpg]: /images/20220611/f3de5339b6e34192a5beb28710e9cb56.png