js常用的选项卡特效
工具/原料
dreamweaver cs6
方法/步骤
1
新建文件,引入js,创建ul列表
2
为列表添加样式
3
效果如图
4
为每个列表里的li添加对应的内容
5
将这些内容包含在一个大的div里面,并且隐藏起来出来第一个div的内容
6
为大的div设置样式
7
效果如图,没有滑过效果
9
js创建li鼠标滑过的效果
10
效果如图,只有鼠标滑过的效果,下面的内容没有变化
11
js创建选项卡的效果,对应li对应下面的内容
12js常用的选项卡特效
如图附上源码,
- 产品介绍
- 产品质检
- 证书COA
- 产品MSDS
- 参考文献
产品介绍的内容
产品质检的内容
证书COA的内容
产品MSDS的内容
参考文献的内容