多语言展示
当前在线:759今日阅读:60今日分享:30

JS滑动门效果 JS标签页效果

方法/步骤
1

思路:1、用一个div放“标签”,用另一个div放和标签对应的“内容”;“标签”和“内容”的数量应该一致;2、把第一个“标签”的CSS样式设置为激活状态;3、把与第一个“标签”对应的“内容'设置为显示,其他“内容”隐藏;4、设置“标签”的鼠标点击事件,判断点击的是第几个标签;把选中标签的CSS样式设置为激活状态,把对应的“内容”显示出来; 本例中,最终的效果图如下:

3

把第一个“标签”的CSS样式设置为激活状态把与第一个“标签”对应的“内容'设置为显示,其他“内容”隐藏; 在 和 标签中插入如下代码:  设置CSS样式之前,效果如下图一;设置后,效果如下图二:

4

最后,设置“标签”的鼠标点击事件在 标签前插入如下代码 :  保存文件,在浏览器中打开就可以看到效果了;点击标签就会切换到对应的内容。

注意事项

例子中使用了 jquery 文件,请从网络或本文例子中下载

推荐信息