今天機(jī)試有個(gè)內(nèi)容是做網(wǎng)易云課堂tab欄切換的，如下

成都創(chuàng)新互聯(lián)公司主營(yíng)察哈爾右翼后網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),察哈爾右翼后h5成都微信小程序搭建,察哈爾右翼后網(wǎng)站營(yíng)銷推廣歡迎察哈爾右翼后等地區(qū)企業(yè)咨詢

先簡(jiǎn)單說下我當(dāng)時(shí)的想法

1.先弄一個(gè)大div盒子，我命名為tab

2.在大盒子tab里面有兩個(gè)小盒子，分別是標(biāo)題欄（tab_list）和內(nèi)容欄（tab_con）

3.采用display：flex；使標(biāo)題欄菜單和內(nèi)容欄的內(nèi)容水平對(duì)齊（可能待會(huì)放的代碼不是很規(guī)范，但實(shí)現(xiàn)對(duì)齊效果）

4.js編寫鼠標(biāo)移入事件，主要是利用display：none和display：block之間的切換。

下面放下我當(dāng)時(shí)寫的代碼吧，可能寫得不是很正規(guī)，不符合習(xí)慣，請(qǐng)大家見諒

由于代碼太多分幾部分說

HTML部分——大致布局，標(biāo)題欄和內(nèi)容欄

    

      

        
今日 20:00開搶
        
明天 10:00開搶
        
明天 14：00開搶
        
明天 20:00開搶
        
后天 10:00
        
后天 14:00
      
    
    

      

      
      
        
      
      
        
       
      
        
        
      
        
       
      
        
        
　　　　　　
    
  

文章名稱：jstab欄切換代碼實(shí)例解析-創(chuàng)新互聯(lián)
標(biāo)題來源：http://www.weahome.cn/article/hopje.html