react中tab选项卡切换
直接上代码 不用的组件可以删了
import React from 'react';
import {
NavLink
} from "react-router-dom";
import Otherbanner from '../otherbanner/index.js';
import Header from '../../header/index.js';
import Footer from '../../footer/index.js';
class Index extends React.Component{
constructor(props){
super(props);
this.state={
tabActiveIndex: 0
}
}
render(){
let tabActiveIndex = this.state.tabActiveIndex;
return(
<div>
<div>
<Header/>
<Otherbanner/>
<div className="m-sys-wrap">
<div className="m-sys-inner">
<div className="m-sys-header">
<ul className="m-sys-tab-wrap">
<li className={"m-sys-tab " + (tabActiveIndex === 0 ? 'active': '')} onClick={this.handleTabClick.bind(this, 0)}>
<span className="m-sys-tab-text">线上课</span>
</li>
<li className={"m-sys-tab " + (tabActiveIndex === 1 ? 'active': '')} onClick={this.handleTabClick.bind(this, 1)}>
<span className="m-sys-tab-text">线下课</span>
</li>
</ul>
</div>
<div className="m-sys-content">
<div className={"m-sys-view " + (tabActiveIndex === 0 ? 'active': '')}>
<div className="mbox">
1111111111111111111111111
</div>
</div>
<div className={"m-sys-view " + (tabActiveIndex === 1 ? 'active': '')}>
<div className="mbox">
2222222222222222222222222222
</div>
</div>
</div>
</div>
</div>
<Footer/>
</div>
</div>
)
}
}
Object.assign(Index.prototype, {
handleTabClick(tabActiveIndex) {
this.setState({
tabActiveIndex
})
}
})
export default Index;
css代码
.m-sys-wrap{
width: 1160px;
margin: 50px auto;
}
.m-sys-header{
border: 1px solid #7bc7ff;
border-bottom: 0px;
}
ol, ul {
margin-top: 0;
margin-bottom: 0px !important;
}
.m-sys-tab{
display: inline-block;
list-style-type: none;
width: 578px;
height: 51px;
text-align: center;
cursor: pointer;
position: relative;
}
.m-sys-tab .m-box{
position: absolute;
top: 55px;
width: 1160px;
height: 400px;
background: aqua;
}
.m-sys-tab.active{
color: #411515;
background-color: #f3f3f3;
}
.m-sys-tab-text{
text-align: center;
line-height: 51px;
color: #7bc7ff;
font-size: 18px;
}
.m-sys-view{
display: none;
color: #ffffff;
border-right: 1px solid #7bc7ff;
border-left: 1px solid #7bc7ff;
border-bottom: 1px solid #7bc7ff;
}
.m-sys-view.active{display: block}
.m-sys-view .mbox{
width: 100%;
height: 220px;
}