代码比较简单,并不复杂
import React, { Component } from "react";
class Taball extends Component {
constructor(props) {
super(props);
this.state = {
current: 1,
};
}
handleTab(index) {
this.setState({
current: index,
});
}
classFn(index, class1, class2) {
//如果符合当前就要多一个class,如果不符合当前就没有对应的class
let { current } = this.state;
return current === index ? class1 : class2;
}
componentDidMount() {
this.handleTab(1);
}
render() {
return (
<div>
<h1>tab切换</h1>
<div className="tab_con2">
<ol>
<li
onClick={() => {
this.handleTab(1);
}}
className={this.classFn(1, "cur", "")}
>
菜单一
</li>
<li
onClick={() => {
this.handleTab(2);
}}
className={this.classFn(2, "cur", "")}
>
菜单二
</li>
<li
onClick={() => {
this.handleTab(3);
}}
className={this.classFn(3, "cur", "")}
>
菜单三
</li>
</ol>
<ul>
<li className={this.classFn(1, "current", "")}>内容一</li>
<li className={this.classFn(2, "current", "")}>内容二</li>
<li className={this.classFn(3, "current", "")}>内容三</li>
</ul>
</div>
</div>
);
}
}
export default Taball;