React实现选项卡

实现选项卡选项：

 class Table extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                current: 1
            }
        }
        tabFn(index) {
            this.setState({
                current: index
            })
        }
        clsFn(index, curCls, cls) {
            let { current } = this.state;
            console.log(current)
            return current === index ? curCls : cls;
        }
        componentDidMount() {
            this.tabFn(1)
        }
        render() {
            let { current } = this.state;
            return (
                <div>
                    <div className='tab_con3'>
                        <ol className='abb'>
                            <li onClick={() => { this.tabFn(1) }} className={this.clsFn(1, 'cur3', '')}>第一页</li>
                            <li onClick={() => { this.tabFn(2) }} className={this.clsFn(2, 'cur3', '')}>第二页</li>
                            <li onClick={() => { this.tabFn(3) }} className={this.clsFn(3, 'cur3', '')}>第三页</li>
                        </ol>

                        <ul className='acc'>
                            <li className={this.clsFn(1, 'current', '')}>第一页</li>
                            <li className={this.clsFn(2, 'current', '')}>第二页</li>
                            <li className={this.clsFn(3, 'current', '')}>第三页</li>
                        </ul>
                    </div>
                </div>
            );
        }
    }

    ReactDOM.render(<Table />, rooter);

css样式：

    <style>
        .tab_con3 {
            width: 500px;
            margin: 0 auto;
        }

        .abb {
            height: 40px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .abb li {
            float: left;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background: #ccc;
            width: 110px;
            text-align: center;
            cursor: pointer;
            margin-right: 40px;
        }

        .acc li {
            height: 260px;
            /* border: 1px solid skyblue; */
            display: none;
        }

        .acc .current {
            display: block;
            background-color: rgb(236, 236, 236);
        }

        .abb .cur3 {
            background: #f60;
        }
    </style>

给大家来个全套的！！