国产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
主站蜘蛛池模板: 国产精品成久久久久三级 | 交换国产精品视频一区 | 国产第10页 | 国产免费高清视频在线观看不卡 | 九九久久国产精品大片 | 亚洲不卡中文字幕 | 日韩午夜免费视频 | 国产精品美女久久久久 | 国产精品亚洲综合 | 国产第一页视频 | 日韩一本| 免费国产一区 | 欧美成人精品高清在线播放 | 国产精品专区第二 | 国产精品久久一区一区 | 久久精品男人影院 | 国产精品色综合久久 | 精品日韩在线观看 | 一级毛片免费 | 高龄五十路中出 | 亚洲欧美日本另类 | 国产高清在线观看 | 亚洲好骚综合 | 国外欧美一区另类中文字幕 | 一级毛片一级毛片一级毛片 | 一级一级特黄女人精品毛片视频 | h免费看| 在线观看免费精品国自产 | 亚洲国产一成人久久精品 | 精品国产96亚洲一区二区三区 | www.日韩在线| 国产高清精品久久久久久久 | 一久久| 国产91精品久久久久999 | 国产成人综合一区精品 | 亚洲午夜伦理 | 亚洲另类色图 | 欧美一区二区在线观看视频 | 91麻豆网站 | 2020精品极品国产色在线观看 | 亚洲精彩视频 |