react 最简单的选项卡 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>tab切换</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
<style>
.tab1,
.tab2 {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
ReactDOM.render(
<div>
{/*点击第一个按钮的时候,实现的是选项卡1的显示 选项卡2隐藏 点击第二个按钮的时候,实现的是选项卡2的显示 选项卡1隐藏*/}
<button onClick={
function (){
document.getElementsByClassName('tab1')[0].style.display='block'
document.getElementsByClassName('tab2')[0].style.display='none'
}
}>tab1</button>
<button onClick={
function(){
document.getElementsByClassName('tab1')[0].style.display='none';
document.getElementsByClassName('tab2')[0].style.display='block';
}
}>tab2</button>
{/*给第二个设置默认隐藏*/}
<div className="tab1">tab1</div>
<div className='tab2' style={{display:"none"}}>tab2</div>
</div>, document.getElementById('root') );
</script>