虽然只是一个简单的功能,还是记录一下比较好。页面上有很多个li,要实现点击到哪个就哪个高亮。当年用jq的时候,也挺简单的,就是选中的元素给addClass,然后它的兄弟元素removeClass,再写个active的样式就搞定了。那现在用react要实现类似的操作,我想到的就是用一个currentIndex,通过判断currentIndex在哪个元素实现切换。
先上一下效果图:
代码:
负载均衡','第三方软件调整','安全加固','性能控制','日志查询','业务分析'];
let itemList = [];
for(let i = 0; i < categoryArr.length; i++) {
itemList.push({categoryArr[i]} );
}
return
-
}
}
css部分
是不是很简单呢。就是在生成这些li的时候给元素添加一个index标志位,然后点击的时候,把这个index用event.currentTarget.getAttribute('index')取出来,然后去设置currentIndex的值,再写一写css的active样式就搞定了。
原文链接:https://www.f2er.com/js/32174.html