react选项卡

index.jsx

import React, { Component } from 'react';

class table extends 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;
        // return current === index ? 'cur2' : '';
    }
    componentDidMount() {
        this.tabFn(1)
    }
    render() {
        let { current } = this.state;
        return (
            <div>
                <h3>这是table2页面</h3>
                <div className='tab_con3'>
                    <ol>
                        <li onClick={() => { this.tabFn(1) }} className={this.clsFn(1, 'cur3', '')}>1</li>
                        <li onClick={() => { this.tabFn(2) }} className={this.clsFn(2, 'cur3', '')}>2</li>
                        <li onClick={() => { this.tabFn(3) }} className={this.clsFn(3, 'cur3', '')}>3</li>
                    </ol>

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

export default table;

 style

.tab_con3{
    width: 500px;
    margin: 0 auto;
    ol{
        height: 40px;
        overflow: hidden;
        margin-bottom: 10px;
        li{
            float: left;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background: #ccc;
            width: 100px;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            margin-right: 40px;
            &.cur3{
                background: #f60;
            }
            
        }
    }
    ul{
        li{
            height: 200px;
            border: 1px solid skyblue;
            display: none;
            &.current{
                display: block;
            }
        }
    }
}