react實現點選選中的li高亮

2022-06-19 10:06:13 字數 574 閱讀 5471

雖然只是乙個簡單的功能,還是記錄一下比較好。頁面上有很多個li,要實現點選到哪個就哪個高亮。當年用jq的時候,也挺簡單的,就是選中的元素給addclass,然後它的兄弟元素removeclass,再寫個active的樣式就搞定了。那現在用react要實現類似的操作,我想到的就是用乙個currentindex,通過判斷currentindex在哪個元素實現切換。

class category extends react.component 

this.setcurrentindex = this.setcurrentindex.bind(this)

} setcurrentindex(event) )

} render() );

}return

}}

css

.category 

li }

就是在生成這些li的時候給元素新增乙個index標誌位,然後點選的時候,把這個index用event.currenttarget.getattribute('index')取出來,然後去設定currentindex的值,再寫一寫css的active樣式就搞定了。

js 點選li輸出當前li的索引號

1.動態新增屬性的方法 星期1li 星期2li 星期3li 星期4li 星期5li ul body var lis document.queryselectorall li for var i 0 i lis.length i script 2.利用閉包的方式 立即執行函式也稱為小閉包因為立即執行函...

angular中實現li或者某個元素點選變色

先說一種最直接了當的不需要js控制,方法一 直接在用ng class就可以控制 p ng click state 1 ng class 浮傷年華 p p ng click state 2 ng class 憂傷說笑 p 在style裡面設定如下 style type text css active ...

React 點選按鈕實現內容複製功能

思路 1.給要複製的內容容器新增乙個標籤 可以是id,可以是類名等 通過dom技術獲取該容器物件 2.建立range物件 某個區域內連續的內容 把該容器物件放進去 3.將range物件新增到selection物件裡 以便將它暴露出來,聯合document.execcommand copy 命令,實現...