试试这个代码
<!--
使用div实现简单选项卡
-->
<!DOCTYPE html>
<html>
<head>
<title>HTML实现简单选项卡</title>
<meta charset="utf-8">
<style type="text/css">
.sli-active{
color: yellow !important
}
.sli-btn{
background:linear-gradient(to right,black,rgb(10,15,10))
color: white
width: 100px
height: 20px
display: inline-block
}
.btns{
background:linear-gradient(to right,black,grey)
display: flex
height: 20px
}
.sli-info{
background:linear-gradient(to right,black,grey)
color: white
}
*{
margin: 0
padding: 0
}
</style>
</head>
<body>
<!-- 按钮div(用户点击的) -->
<div class="btns">
<div id="btn_1" class="sli-btn sli-active">一号</div>
<div id="btn_2" class="sli-btn">二号</div>
</div>
<!-- 内容div(实际展示信息的) -->
<div id="info1" class=sli-info>
一号按钮对应的信息
</div>
<div id="info2" style="display: none" class=sli-info>
二号按钮对应的信息
</div>
<!-- javascript脚本 -->
<script type="text/javascript">
//获取所有元素(div)
var btn1 = document.getElementById('btn_1')
var btn2 = document.getElementById('btn_2')
var info1 = document.getElementById('info1')
var info2 = document.getElementById('info2')
//绑定事件句柄(通俗来讲就是叫浏览器知道当用户点击按钮的时候执行什么)
//一号按钮被按下(为了支持触摸以及鼠标设备，同时绑定onclick(点击)和ontouchstart(手放在屏幕上))
btn1.addEventListener("click",function(){
//显示信息1，隐藏信息2
info2.style.display="none"
info1.style.display="block"
//更改按钮视觉效果
btn2.className="sli-btn"
btn1.className="sli-active sli-btn"
})
btn1.addEventListener("touchstart",function(){
//显示信息1，隐藏信息2
info2.style.display="none"
info1.style.display="block"
//更改按钮视觉效果
btn2.className="sli-btn"
btn1.className="sli-active sli-btn"
})
//二号按钮被按下(为了支持触摸以及鼠标设备，同时绑定onclick(点击)和ontouchstart(手放在屏幕上))
btn2.addEventListener("click",function(){
//显示信息2，隐藏信息1
info1.style.display="none"
info2.style.display="block"
//更改按钮视觉效果
btn1.className="sli-btn"
btn2.className="sli-active sli-btn"
})
btn2.addEventListener("touchstart",function(){
//显示信息2，隐藏信息1
info1.style.display="none"
info2.style.display="block"
//更改按钮视觉效果
btn2.className="sli-btn"
btn2.className="sli-active sli-btn"
})
</script>
</body>
</html>
利用display命令，设置是否及如何显示元素。display 显示状态
display:none 隐藏
display:block 块显示
display:inline 内嵌
display:table 表格显示
display:list-item 项目列表
这个属性用于定义建立布局时元素生成的显示框类型。
对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
display不光是控制元素是否显示，而且还控制元素外观。比如display:block，或者display:table-cell, display:inline之类的而visibility大体上是控制元素是否显示出来，它并不控制元素是以块、单元格、行或者其他的外观。
当你想隐藏一个元素的时候，如果用display:none的话，这个元素就完全不显示，也不占位置，不遮盖比它z-index小的元素。
但是如果你用visibility:hidden的时候，元素虽然不会显示在网页上，但是元素还是会占位，而且也会覆盖比它z-index小的元素，visibility:hidden只是让元素变得不可见而已。
