好好学习！-慕课网

好好学习！

来源：10-1 编程挑战
沐沐3381925
2020-12-04 01:39
 <!DOCTYPE html> 
 <html> 
 <head>  
 <meta charset="UTF-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">    
 <title>实践题 - 选项卡</title>    
 <style type="text/css">           
    body {max-width: 600px;margin: 20px auto;}       
    .label-all {     width: 500px;     height: 200px; }     
    ul{     display: table;     margin-top: 0;     }     
    .nav {     height: 20%;     
               padding-left: 0;        
               margin-bottom: 0;         
               width: 100%;          
       }     
    .nav a{     text-decoration: none;     }     
    .nav li{      
            height: 20%;    
            border-top: 1px solid #D8D1D1;    
            border-left: 1px solid #D8D1D1;    
            border-right: 1px solid #D8D1D1;    
            border-bottom: 2px solid red;    
            /*table-cell去掉了前面的点以及把三个摞起来的li给整到一行*/    
            display: table-cell;    
            text-align: center;    
            vertical-align: middle;    
            border-radius: 3px;
        }          
    .col-md-4{     width:20%;  }        
    .nav-content-control{        
               height: 80%;        
               line-height: 40px;        
               border-right: 1px solid #837F7F;        
               border-left: 1px solid #837F7F;        
               border-bottom: 1px solid #837F7F;        
                border-radius: 5px;        
                      }        
    .nav-content {        
              padding: 0px 75px;        
              height: 100%;                
              display: none;        
             }    
</style>
<script type="text/javascript">     
    window.onload=function(){      
        document.getElementById("content-one").style.display="block";      
        document.getElementById('one').setAttribute('style','border-top:2px solid red;border-bottom:0');     
        }    
     // JS实现选项卡切换
     function active(obj) {
         obj.setAttribute('style','background-color:#ddd;color:red;border-top:2px solid red;border-bottom:0;');
         
         for(const e of ['one','two','three']){
             if(e==obj.id){
                 document.getElementById('content-'+e).style.display='block';
              }else if(e!=obj.id) {
                    document.getElementById(e).removeAttribute('style');
                    document.getElementById('content-'+e).style.display='none';
                    }
         }
     }
 </script> 
 </head>
 <body>
    <div class="label-all">
        <ul class="nav">
        <li class="nav-title col-md-4" id="one" onclick="active(this)"><a href="javascript:void(0);">房产</a></li>
        <li class="nav-title col-md-4" id="two" onclick="active(this)"><a href="javascript:void(0);">家居</a></li>
        <li class="nav-title col-md-4" id="three" onclick="active(this)"><a href="javascript:void(0);">二手房</a></li>
      </ul>
        <div class="nav-content-control">
            <div class="nav-content" id="content-one">    
                275万购昌平邻铁三居 总价20万买一居    
                200万内购五环三居 140万安家东三环    
                北京首现零首付楼盘 53万购东5环50平    
                京楼盘直降5000 中信府 公园楼王现房
            </div>
            <div class="nav-content" id="content-two">
                40平出租屋大改造 美少女的混搭小窝     
                经典清新简欧爱家 90平老房焕发新生     
                新中式的酷色温情 66平撞色活泼家居     
                瓷砖就像选好老婆 卫生间烟道的设计
            </div>
            <div class="nav-content" id="content-three" >     
                通州豪华3居260万 二环稀缺2居250w甩     
                西3环通透2居290万 130万2居限量抢购     
                黄城根小学学区仅260万 121平70万抛!     
                独家别墅280万 苏州桥2居优惠价248万
            </div>
        </div>
   </div>
</body>
</html>
写回答关注