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

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

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

先简单说下我当时的想法

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
      

分享标题:jstab栏切换代码实例解析-创新互联
网址分享:http://myzitong.com/article/hopje.html