点击切换卡片
一、知识点说明
1.我呢就是写一个 案例用来展示tab切换卡效果。里面涉及的主要知识有js,过渡,淡化 ,以及一些辅助属性,比如隐藏这些。
2.css。应用了hover伪类,鼠标悬停。淡化,透明度运用过渡实现此效果。这里还用了一下类似滤镜的效果。
3.js。首先获取到元素,这是第一步。然后通过删减和增加类或id实现切换并控制效果显示和隐藏。用setAttribute属性和getAttribute属性。这里呢,我还用了index来做索引。整体用了一个函数把它打包了。
二、案例展示。
卡片切换
三、源码。
1.部分html布局。因为重复和过于长,就展示部分。
2.js。鉴于博友们都是大佬,css也不难,就不拉出来献丑了。