react中tab选项卡切换

• Z时代
• 2024-01-10
• 分类：综合

直接上代码 不用的组件可以删了

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;
}

以上是 react中tab选项卡切换 的全部内容， 来源链接： utcz.com/z/383944.html