jstab栏切换代码实例解析-创新互联

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

成都创新互联公司主营察哈尔右翼后网站建设的网络公司,主营网站建设方案,成都APP应用开发,察哈尔右翼后h5成都微信小程序搭建,察哈尔右翼后网站营销推广欢迎察哈尔右翼后等地区企业咨询

先简单说下我当时的想法

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

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

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

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

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

由于代码太多分几部分说

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

<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栏切换代码实例解析-创新互联
文章源于：https://www.cdcxhl.com/article24/hopje.html

成都网站建设公司_创新互联，为您提供外贸网站建设、静态网站、网站内链、搜索引擎优化、网站收录、电子商务

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联