国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

react實現點擊選中的li高亮的示例代碼

來源:懂視網 責編:小采 時間:2020-11-27 22:14:05
文檔

react實現點擊選中的li高亮的示例代碼

react實現點擊選中的li高亮的示例代碼:雖然只是一個簡單的功能,還是記錄一下比較好。頁面上有很多個li,要實現點擊到哪個就哪個高亮。當年用jq的時候,也挺簡單的,就是選中的元素給addClass,然后它的兄弟元素removeClass,再寫個active的樣式就搞定了。那現在用react要實現類似的操作,我想
推薦度:
導讀react實現點擊選中的li高亮的示例代碼:雖然只是一個簡單的功能,還是記錄一下比較好。頁面上有很多個li,要實現點擊到哪個就哪個高亮。當年用jq的時候,也挺簡單的,就是選中的元素給addClass,然后它的兄弟元素removeClass,再寫個active的樣式就搞定了。那現在用react要實現類似的操作,我想

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

先上一下效果圖:


代碼:

 class Category extends React.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() {
 let categoryArr = ['產品調整', '接口流量', '負載均衡', '第三方軟件調整',
 '安全加固', '性能控制', '日志查詢', '業務分析'];
 let itemList = [];
 for(let i = 0; i < categoryArr.length; i++) {
 itemList.push(<li key={i}
 className={this.state.currentIndex === i ? 'active' : ''}
 index={i} onClick={this.setCurrentIndex}
 >{categoryArr[i]}</li>);
 }
 return <ul className="category">{itemList}</ul>
 }
}

css部分

 .category {
 padding-left: 0;
 &:after {
 content: '';
 display: block;
 clear: both;
 }
 li {
 float: left;
 width: 23%;
 height: 40px;
 margin-right: 10px;
 margin-bottom: 10px;
 border: 1px solid $border-color;
 list-style: none;
 color: $font-color;
 line-height: 40px;
 text-align: center;
 font-size: 14px;
 cursor: pointer;
 &.active {
 border-color: #079ACD;
 }
 }

是不是很簡單呢。就是在生成這些li的時候給元素添加一個index標志位,然后點擊的時候,把這個index用event.currentTarget.getAttribute('index')取出來,然后去設置currentIndex的值,再寫一寫css的active樣式就搞定了。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

react實現點擊選中的li高亮的示例代碼

react實現點擊選中的li高亮的示例代碼:雖然只是一個簡單的功能,還是記錄一下比較好。頁面上有很多個li,要實現點擊到哪個就哪個高亮。當年用jq的時候,也挺簡單的,就是選中的元素給addClass,然后它的兄弟元素removeClass,再寫個active的樣式就搞定了。那現在用react要實現類似的操作,我想
推薦度:
標簽: 選中 點擊 高亮
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产v片在线观看 | 亚洲一区日韩一区欧美一区a | 91香蕉福利一区二区三区 | 欧洲毛片| 中文字幕 日韩有码 | 国产自在自线午夜精品视频 | 国产成人精品日本亚洲网址 | 欧美在线观看日韩欧美在线观看 | 国产高清在线免费 | 国产精品亚洲一区二区三区久久 | 日韩欧美国产另类 | 黄色毛片免费看 | 一级毛片免费下载 | 国产成人精品一区 | 欧美成人精品一区二区三区 | 国产高清美女一级a毛片久久 | 亚洲日韩第一页 | 亚洲一区二区在线成人 | 亚洲伊人电影 | 黄a免费 | 亚洲欧洲精品成人久久曰影片 | 欧美色图在线观看 | 免费国产成人α片 | 亚洲一区免费视频 | 久久无码av三级 | 欧美夜夜 | 伊人久久综合 | 国产精品视频区 | 国产夜夜操 | 毛片导航 | 精品伊人久久久久7777人 | 九九精品99久久久香蕉 | 国内精品久久久久影院网站 | 精品欧美一区二区在线观看 | 国产欧美一区二区精品久久久 | 国产精品第一区在线观看 | 亚洲免费网站观看视频 | 欧美变态人zozo禽交 | 欧美videos极品另类 | 亚洲美女一区二区三区 | 91精品国产91久久久久久 |