react代码:
import React, { Component } from 'react';
import './App.css'
class App extends Component {
state = {
menuNum: 1
}
setMenuNum = (num) => {
this.setState({
menuNum: num
});
}
render() {
return (
<div className="box">
<button className={this.state.menuNum === 1 ? "btn btn-choose " : "btn"} onClick= {()=> this.setMenuNum(1)} >按钮1</button>
<button className={this.state.menuNum === 2 ? "btn btn-choose " : "btn"} onClick= {()=> this.setMenuNum(2)} >按钮1</button>
<button className={this.state.menuNum === 3 ? "btn btn-choose " : "btn"} onClick= {()=> this.setMenuNum(3)} >按钮1</button>
</div>
);
}
}
export default App;
css代码:
.box {
margin: 40px auto;
text-align: center;
}
.btn {
width: 80px;
height: 40px;
background: green;
margin: 20px;
}
.btn-choose{
background: pink;
}