React基础-实现简单tab切换

通过改变this.state中的值判断是否为当前节点并且添加类名实现tab切换

import React, { Component } from 'react'
import './demo.css'
//实现简单tab切换
export default class app7 extends Component {
    constructor(props){
        super(props)
        this.state={
            num:1
        }
    }
    change(mynum){
        this.setState({
            num:mynum
        })
    }
    render() {
        return (
            <div>
                <div className="tab">
                    <ul className="tab_top">
                   {/*   使用箭头函数通过传值到change函数,从而更新this.state里的值来进行判断是否添加类名 当有show类名的时候该li背景颜色高亮*/} 
                        <li className={this.state.num===1?'show':''} onClick={()=>this.change(1)}>生活</li>
                        <li className={this.state.num===2?'show':''} onClick={()=>this.change(2)}>科技</li>
                        <li className={this.state.num===3?'show':''} onClick={()=>this.change(3)}>军事</li>

                        {/* 通过bind(this,需要传的值)传值到change函数,从而更新this.state里的值来进行判断是否添加类名 当有show类名的时候该li背景颜色高亮*/}
                        {/* <li className={this.state.num===1?'show':''} onClick={this.change.bind(this,1)}>生活</li>
                        <li className={this.state.num===2?'show':''} onClick={this.change.bind(this,2)}>科技</li>
                        <li className={this.state.num===3?'show':''} onClick={this.change.bind(this,3)}>军事</li> */}
                    </ul>
                    <ol  className="tab_down">
                        <li className={this.state.num===1?'show':''}>生活</li>{/* 通过更新this.state里的值来进行判断是否添加类名 ,当有show类名的时候该li display:block*/}
                        <li className={this.state.num===2?'show':''}>科技</li>
                        <li className={this.state.num===3?'show':''}>军事</li>
                    </ol>
                </div>
            </div>
        )
    }
}

css

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.tab{
    width: 500px;
    height: 300px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: tan;
}
.tab_down{
    height: 240px;
}
.tab_down li{
    height: 240px;
    background-color: greenyellow;
    display: none;
}
.tab_down li.show{
    display: block;
}
.tab_top{
    height: 60px;
}
.tab_top li{
    height: 60px;
    width: 30%;
    background-color: gray;
    float: left;
    margin-right: 10px;
}
.tab_top li.show{
    background-color: greenyellow;
}