jstab欄切換代碼實例解析-創(chuàng)新互聯(lián)

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

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

先簡單說下我當時的想法

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

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

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

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

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

由于代碼太多分幾部分說

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

<div class="tab">
    <div class="tab_list">
      <ul>
        <li class="active" >今日 20:00開搶</li>
        <li>明天 10:00開搶</li>
        <li>明天 14：00開搶</li>
        <li>明天 20:00開搶</li>
        <li>后天 10:00</li>
        <li>后天 14:00</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" >
      </div>
      <div class="item">        
      </div>
      <div class="item">        
       </div>
      <div class="item">        
        </div>
      <div class="item">        
       </div>
      <div class="item">        
        </div>　　　　　　
    </div>
  </div>

文章名稱：jstab欄切換代碼實例解析-創(chuàng)新互聯(lián)
文章源于：http://bm7419.com/article24/hopje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、網(wǎng)站收錄、電子商務

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)