方式一：
<title>选项卡方式一</title>
<style>
div{
width: 15rem;
height: 10rem;
border: 1px solid red;
}
</style>
</head>
<body>
<button>按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<div></div>
</body>
<script>
var btns=document.querySelectorAll('button');
var div=document.querySelector('div');
for(let i=0;i<btns.length;i++){
btns[i].onclick=function(){
div.innerText=btns[i].innerText;
}
}
方式二：
<title>选项卡方式二</title>
<style>
div{
width: 15rem;
height: 10rem;
border: 1px solid red;
display: none;
}
/*div:nth-of-type(1){*/
/*display: block;*/
/*}*/
.none{
display: none;
}
.block{
display: block;
}
</style>
</head>
<body>
<button>按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<div class="block">我是第一个</div>
<div>我是第二个</div>
<div>我是第三个</div>
</body>
<script>
var btns=document.querySelectorAll('button');
var divs=document.querySelectorAll('div');
for(let i=0;i<btns.length;i++){
btns[i].onclick=function(){
for(let j=0;j<divs.length;j++){
divs[j].className='none';
}
divs[i].className='block';
}
}
</script>
</html>