React 实现tab切换效果

React 实现tab切换效果

html以及js代码逻辑

class Views extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current:1,
    }
  }
  tabFn(index) {
    this.setState({
      current:index
    })
  }
  clsFn(_index,curCls,cls) {
    // 如果符合当前就多一个class，如果不符合当前就没有对应的class
    //把样式里的判断提出来 current===1?'cur':''
    let { current } = this.state;
    return current === _index ? curCls : cls;
  }
  componentDidMount() {
    this.tabFn(1);
    // this.clsFn(1);
  }
  render() {
    return (
      <div>
        <h3>tab切换</h3>
        <div className='tab_con'>
          <ol>
            <li onClick={()=>{this.tabFn(1)}} className={this.clsFn(1,"cur",'')}>菜单一</li>
            <li onClick={()=>{this.tabFn(2)}} className={this.clsFn(2,"cur",'')}>菜单二</li>
            <li onClick={()=>{this.tabFn(3)}} className={this.clsFn(3,"cur",'')}>菜单三</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>
    );
  }
}

css样式

.tab_con {
	width: 500px;
	margin: 0 auto;
	ol {
		height: 40px;
		overflow: hidden;
		li {
			list-style: none;
			float: left;
			height: 40px;
			line-height: 40px;
			width: 100px;
			text-align: center;
			font-size: 14px;
			background: #ccc;
			margin-right: 5px;
			cursor: pointer;
			color: #fff;
			&.cur {
				background: #f60;
			}
		}
	}
	ul {
		li {
			list-style: none;
			min-height: 200px;
			border: 1px solid red;
			display: none;
			&.current {
				display: block;
			}
		}
	}
}

直接可以使用，按照自己需求改即可