多语言展示
当前在线:517今日阅读:26今日分享:39

js常用的选项卡特效

js常用的选项卡特效
工具/原料

dreamweaver cs6

方法/步骤
1

新建文件,引入js,创建ul列表

2

为列表添加样式

3

效果如图

4

为每个列表里的li添加对应的内容

5

将这些内容包含在一个大的div里面,并且隐藏起来出来第一个div的内容

6

为大的div设置样式

7

效果如图,没有滑过效果

9

js创建li鼠标滑过的效果

10

效果如图,只有鼠标滑过的效果,下面的内容没有变化

11

js创建选项卡的效果,对应li对应下面的内容

12

如图附上源码,js常用的选项卡特效

 
         
  • 产品介绍
  •      
  • 产品质检
  •      
  • 证书COA
  •      
  • 产品MSDS
  •      
  • 参考文献
  •  
   
       产品介绍的内容   
               

推荐信息