当前位置: 首页 > Web前端 > CSS

React实现选中的li高亮

时间:2023-03-30 23:23:20 CSS

虽然只是一个简单的功能,还是记录一下比较好。页面上有很多lis,点击哪个lis就会高亮显示。当年用jq的时候,挺简单的,就是把选中的元素添加到addClass,然后是它的兄弟元素removeClass,然后写一个active样式就搞定了。现在要用react来实现类似的操作,我想到的是用一个currentIndex来判断currentIndex在哪个元素中来切换。先看效果图:代码:classCategoryextendsReact.Component{constructor(props){super(props)this.state={currentIndex:0}this.setCurrentIndex=this.setCurrentIndex.bind(this)}setCurrentIndex(event){this.setState({currentIndex:parseInt(event.currentTarget.getAttribute('index'),10)})}render(){letcategoryArr=['产品调整','接口流量','负载均衡','第三方软件调整'、'安全加固'、'性能控制'、'日志查询'、'业务分析'];让itemList=[];for(leti=0;i{categoryArr[i]});}返回{itemList}}}csspart.category{左填充:0;&:之后{内容:'';显示:块;明确:两者;}li{浮动:左;宽度:23%;高度:40px;右边距:10px;margin-bottom:10pxborder:1pxsolid$border-color;列表样式:无;颜色:$字体颜色;行高:40px;文本对齐:居中;字体大小:14px;游标:指针;&.active{border-color:#079ACD;是不是很简单?在生成这些li的时候给元素加上一个index标志,然后点击的时候,用event.currentTarget.getAttribute('index')取出index,然后设置currentIndex的值,然后写css的active样式完成它。

最新推荐
猜你喜欢