绵阳梓潼网站制作公司

jstab栏切换代码实例解析

今天机试有个内容是做网易云课堂tab栏切换的，如下

创新互联专注于九台网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供九台营销型网站建设，九台网站制作、九台网页设计、九台网站官网定制、小程序设计服务，打造九台网络公司原创品牌,更为您提供九台网站排名全网营销落地服务。

js tab栏切换代码实例解析

先简单说下我当时的想法

1.先弄一个大div盒子，我命名为tab

2.在大盒子tab里面有两个小盒子，分别是标题栏（tab_list）和内容栏（tab_con）

3.采用display：flex；使标题栏菜单和内容栏的内容水平对齐（可能待会放的代码不是很规范，但实现对齐效果）

4.js编写鼠标移入事件，主要是利用display：none和display：block之间的切换。

下面放下我当时写的代码吧，可能写得不是很正规，不符合习惯，请大家见谅

由于代码太多分几部分说

HTML部分——大致布局，标题栏和内容栏


    

      
    
        
  • 今日 20:00开抢
    • 
        
  • 明天 10:00开抢
    • 
        
  • 明天 14：00开抢
    • 
        
  • 明天 20:00开抢
    • 
        
  • 后天 10:00
    • 
        
  • 后天 14:00
    • 
      

    

    

      

      

      
        
      

      
        
       

      
        
        

      
        
       

      
        
        
　　　　　　

部分内容区item区域的HTML代码，基本差不多


        

          

            
            

              
javascript课程

              
妙学堂

              

                ￥49.9
                ￥1600
                即将开抢
              

            

          

          

            
            

            
javascript课程

              
妙学堂

              

                ￥49.9
                ￥1600
                即将开抢
              

            

          

          

            
            

            
javascript课程

              
妙学堂

              

                ￥49.9
                ￥1600
                即将开抢
              

            

          

          

            
            

            
javascript课程

              
妙学堂

              

                ￥49.9
                ￥1600
                即将开抢
              

            

          

          

            
            

            
javascript课程

              
妙学堂

              

                ￥49.9
                ￥1600
                即将开抢

CSS部分

.tab{
     width: 100%;
     height: 300px;
     text-align: center;
     
     margin: 10px auto;
     background-color: ghostwhite;
   }
   .tab_list ul{
     display: flex;
     height: 50px;
     margin: 0 auto;
     padding: 0;     
   }
   .tab li{
     
     list-style: none;
     height: 50px;
     line-height: 50px;
     flex:auto;     
   }

   .tab_list .active{
     background-color: red;
     color: #ffffff;
   }
   .tab_con{
     margin: 10px auto;
     width: 100%;
     height: 200px;
     
   }
   .item{
     display: none;
   }
   .box{
     display: flex;
   }
   .product{
     
     flex: auto;
   }
   .product img{
     width: 220px;
     height: 120px;       
   }
    .price{
      position: relative;
     
     width: 220px;
     height: 80px;
   } 
   .price p{
     margin: 0px;
     left: 0px;
     position: absolute;
   }

JS部分

最终我的效果如下

js tab栏切换代码实例解析

不是很相像，但还算过得去。。。。。。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


文章标题：jstab栏切换代码实例解析
链接地址：http://myzitong.com/article/ipjgjo.html

其他资讯