用React实现简易的tab切换的思路

最新推荐文章于 2024-09-30 14:28:41 发布

Mr_li@web

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量598

点赞数 1

分类专栏：代码小案例文章标签： javascript css reactjs css3 es6

本文链接：https://blog.csdn.net/weixin_45970617/article/details/104348931

版权

代码小案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

直接上代码

import React,{Component} from  'react'
import ReactDOM from 'react-dom'
import './index.css'
class Tab extends Component {
    state={
        current: 0
    }
    addclass (idx) {
        this.setState({current:idx})
    }
    render() {
        return (
            <ul>
               {new Array(5).fill().map(( item,index)=><li idx={index} className={this.state.current === index ? "bgc" : null} onClick={this.addclass.bind(this,index)} key={index}></li>)}
            </ul>
        )
    }
}
ReactDOM.render(<Tab />,document.getElementById('root'))

下面是css代码

ul {
    list-style: none;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #000;
    width: 240px;

}
li {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    margin: 0 auto;
    margin-bottom: 5px;

}
.bgc {
    background-color: pink;
}