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;
}
}
}
}
直接可以使用,按照自己需求改即可