国产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
主站蜘蛛池模板: 亚洲欧美日韩在线2020 | 欧美高清第一页 | 国产特级毛片aaaaaa高清 | 美国一级大黄大色毛片 | 四虎精品 | 国产国语高清在线视频二区 | 国产一区三区二区中文在线 | 国产一区亚洲二区三区毛片 | 久久伊人中文字幕有码 | 一区二区三区高清不卡 | 欧美日比 | 日韩区| 国产一级片免费观看 | 亚洲娇小性色xxxx | 午夜大片网 | 制服丝袜中文字幕在线 | 国产精品久久久久毛片 | 国内久久 | 高清国产一区 | 欧美h网 | 国产一区二区高清 | 欧美精品亚洲人成在线观看 | 精品免费久久久久国产一区 | 国产v欧美v日韩在线观看 | 久久九九国产 | 国产欧美日韩另类va在线 | 中文字幕一区二区三区四区 | 国产日韩一区二区三区在线播放 | 美女视频黄a视频全免费网站下载 | 国产精品国产精品国产专区不卡 | 欧美日本韩国一区二区 | 亚洲 欧美 日韩 小说 另类 | 国产丝袜一区二区三区在线观看 | 欧美另类色图 | 国产免费高清视频在线观看不卡 | 久久久久久久岛国免费播放 | 国产成人无精品久久久 | 欧美高清一区二区三区欧美 | 日本免费一区尤物 | 日本a级免费 | 亚洲欧美日韩国产综合高清 |