react实现当前选中的li高亮

作者: MJ 分类: react 发布时间: 2018-11-10 14:19

react实现当前选中的li高亮

代码

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
class Head extends Component{
    constructor(props){
        super(props)
        this.state = {
            isSelect:0
        }
        this.setCur = this.setCur.bind(this)
    }
    setCur(e){
        console.log(e.currentTarget.getAttribute('index'))
        this.setState({
            isSelect:Number(e.currentTarget.getAttribute('index'))
        });
    }
    render(){
        let navs = [
            {
                path:"/",
                name:'首页'
            },
            {
                path:"/profile",
                name:'企业简介'
            },
            {
                path:"/product",
                name:'成功案例'
            },
            {
                path:"/content",
                name:'联系我们'
            }
        ]
        return (
            <header>
                <nav>
                    {
                       navs.map((item,i) => {
                        return <li key={i} index={i} className={this.state.isSelect === i ? 'activeted' : ''} onClick={this.setCur}><NavLink to={item.path}>{item.name}</NavLink></li>
                       }) 
                    }
                </nav>
            </header>
        )
    }
}
export default Head;

css

.activeted{
    color:#fff;
    background: #f60;
}
.activeted a{
    color: #fff;

 

转:https://segmentfault.com/a/1190000014995953

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注